Font Family

Utilities for controlling the font family of an element.

Class reference

Sans-serif

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

<p class="font-sans text-lg text-gray-800 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-gray-800 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-gray-800 text-center">
  I'm a monospaced paragraph.
</p>

Responsive

To control the font family of an element at a specific breakpoint, add a {screen}: prefix to any existing font family utility class. For example, use md:font-serif to apply the font-serif utility at only medium screen sizes and above.

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

all

sm

md

lg

xl

<p class="font-sans sm:font-serif md:font-mono lg:font-sans xl:font-serif">
  <!-- ... -->
</p>

I’m a paragraph.

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 theme.fontFamily section of your Tailwind config.

  // tailwind.config.js
  module.exports = {
    theme: {
      fontFamily: {
-       'sans': ['-apple-system', 'BlinkMacSystemFont', ...],
-       'serif': ['Georgia', 'Cambria', ...],
-       'mono': ['SFMono-Regular', 'Menlo', ...],
+       'display': ['Oswald', ...],
+       'body': ['Open Sans', ...],
      }
    }
  }

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 pseudo-class variants

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

You can control which variants are generated for the font family utilities by modifying the fontFamily property in the variants section of your tailwind.config.js file.

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

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     fontFamily: ['responsive'],
+     fontFamily: ['responsive', 'hover', 'focus'],
    }
  }

Disabling

If you don’t plan to use the font family utilities in your project, you can disable them entirely by setting the fontFamily property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     fontFamily: false,
    }
  }

← Max-Height   Font Size →