Font Family

Utilities for controlling the font family of an element.

Default class reference

Sans-serif

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

<p class="font-sans ...">
  The quick brown fox jumps over the lazy dog.
</p>

Serif

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

<p class="font-serif ...">
  The quick brown fox jumps over the lazy dog.
</p>

Monospaced

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

<p class="font-mono ...">
  The quick brown fox jumps over the lazy dog.
</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.

<p class="font-sans md:font-serif">
  <!-- ... -->
</p>

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

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': ['ui-sans-serif', 'system-ui', ...],
-       'serif': ['ui-serif', 'Georgia', ...],
-       'mono': ['ui-monospace', 'SFMono-Regular', ...],
+       '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', ...],
}

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: {
      extend: {
        // ...
+       fontFamily: ['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→

Edit this page on GitHub