Font Family

Sets the font family (typeface) for text. Font family is one of the most important typographic choices for establishing the visual tone of your content and ensuring readability. Tailwind's font family utilities provide system font stacks that look great across different devices and operating systems without requiring custom font loading. In Tailwind v4, font metrics are better handled to reduce layout shift.

Typography1 variant3 examples

Official Docs Open Playground

Basic usage:

<p class="font-sans">The quick brown fox jumps over the lazy dog. (Sans-serif)</p>
<p class="font-serif">The quick brown fox jumps over the lazy dog. (Serif)</p>
<p class="font-mono">The quick brown fox jumps over the lazy dog. (Monospace)</p>

Examples

Three main font families: sans-serif, serif, and monospace

<p class="font-sans">The quick brown fox jumps over the lazy dog. (Sans-serif)</p>
<p class="font-serif">The quick brown fox jumps over the lazy dog. (Serif)</p>
<p class="font-mono">The quick brown fox jumps over the lazy dog. (Monospace)</p>

Edit in playground

Strategic use of different font families in a document

<!-- Combining font families with other typography utilities -->
<article class="max-w-2xl mx-auto p-4">
  <h1 class="font-serif text-3xl font-bold mb-4">Article Title with Serif Font</h1>
  <p class="font-sans text-gray-700 mb-4">This article uses a sans-serif font for the body text, which is generally more readable on screens. The heading above uses a serif font to create typographic contrast and visual hierarchy.</p>
  <pre class="font-mono bg-gray-100 p-4 rounded mb-4">// Code example using monospace font
function example() {
  return "Monospace fonts are essential for code";
}</pre>
  <p class="font-sans text-gray-700">Combining different font families strategically can enhance both aesthetics and readability.</p>
</article>

Edit in playground

Modern interface using sans-serif for UI and monospace for data

<!-- Font family in a modern interface -->
<div class="max-w-lg mx-auto bg-white rounded-lg shadow-md overflow-hidden">
  <div class="bg-gradient-to-r from-purple-500 to-blue-500 p-8 text-white">
    <h2 class="font-sans text-2xl font-bold">Dashboard Overview</h2>
    <p class="font-sans text-sm">Welcome back to your analytics dashboard</p>
  </div>
  <div class="p-6">
    <div class="mb-6">
      <h3 class="font-sans text-lg font-semibold mb-2">Statistics</h3>
      <div class="grid grid-cols-3 gap-4 text-center">
        <div>
          <p class="font-mono text-xl font-bold">1,234</p>
          <p class="font-sans text-xs text-gray-600">Views</p>
        </div>
        <div>
          <p class="font-mono text-xl font-bold">$5,678</p>
          <p class="font-sans text-xs text-gray-600">Revenue</p>
        </div>
        <div>
          <p class="font-mono text-xl font-bold">90%</p>
          <p class="font-sans text-xs text-gray-600">Satisfaction</p>
        </div>
      </div>
    </div>
    <div>
      <h3 class="font-sans text-lg font-semibold mb-2">Recent Activity</h3>
      <div class="text-sm space-y-2">
        <p class="font-sans">New comment on your post</p>
        <p class="font-sans">Invoice #12345 paid</p>
        <p class="font-sans">New subscriber to your newsletter</p>
      </div>
    </div>
  </div>
</div>

Edit in playground

Live Preview

Try the Font Family utility with different values

Open Interactive Playground

Variants

font-sans: UI-optimized sans-serif stack (e.g., system-ui, Roboto, Helvetica); font-serif: classic serif stack (e.g., Georgia, Cambria, Times); font-mono: monospace stack for code and tabular data (e.g., SFMono, Consolas, monospace); You can extend this in your Tailwind config to add custom fonts

sansserifmono