Font Families

Class reference

Sans-serif

Use .font-sans to apply a web safe sans-serif font family:

<p class="font-sans text-lg text-grey-darkest text-center">
  I'm a sans-serif paragraph.
</p>

Serif

Use .font-serif to apply a web safe serif font family:

<p class="font-serif text-lg text-grey-darkest text-center">
  I'm a serif paragraph.
</p>

Monospaced

Use .font-mono to apply a web safe monospaced font family:

<p class="font-mono text-lg text-grey-darkest text-center">
  I'm a monospaced paragraph.
</p>

Customizing

Font Families

By default Tailwind provides three font family utilities: a cross-browser sans-serif stack, a cross-browser serif stack, and a cross-browser monospaced stack. You can change, add, or remove these by editing the fonts section of your Tailwind config.

Font families can be specified as an array or as a simple comma-delimited string:

{
  // Array format:
  'sans': ['Helvetica', 'Arial', 'sans-serif'],

  // Comma-delimited format:
  'sans': 'Helvetica, Arial, sans-serif',
}

Note that Tailwind does not automatically escape font names for you. If you're using a font that contains an invalid identifier, wrap it in quotes or escape the invalid characters.

{
  // Won't work:
  'sans': ['Exo 2', ...],

  // Add quotes:
  'sans': ['"Exo 2"', ...],

  // ...or escape the space:
  'sans': ['Exo\\ 2', ...],
}

Responsive and State Variants

By default, only responsive variants are generated for font utilities.

You can control which variants are generated for the font utilities by modifying the fonts property in the modules section of your Tailwind config file.

For example, this config will also generate hover and focus variants:

Disabling

If you don't plan to use the font utilities in your project, you can disable them entirely by setting the fonts property to false in the modules section of your config file: