Font Family

Sans-serif

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

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>

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

I’m a paragraph.

Customizing

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.

  module.exports = {
    theme: {
      fontFamily: {
-       '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'],
  '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.

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 file.

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

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

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,
  }