Tailwind CSS - Font Family

Tailwind CSS - Font Family

Tailwind CSS provides utility classes to control the font family of text elements. By default, it includes three ready-to-use font stacks for sans-serif, serif, and monospace fonts, which are designed to be cross-platform compatible and aesthetically pleasing.

Default Font Family Utilities

Here are the default font family classes and their corresponding CSS font stacks:

Class	CSS Properties
font-sans	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, “Noto Sans”, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”, “Noto Color Emoji”;
font-serif	font-family: ui-serif, Georgia, Cambria, “Times New Roman”, Times, serif;
font-mono	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, “Liberation Mono”, “Courier New”, monospace;

Example: Applying Default Font Families

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Family Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 font-sans text-slate-800">

  <h1 class="text-3xl font-bold mb-4">Default Font Families</h1>

  <div class="space-y-4">
    <p class="font-sans text-lg">This is sans-serif text. It's great for UI and body copy.</p>
    <p class="font-serif text-lg">This is serif text. It's often used for long-form reading.</p>
    <p class="font-mono text-lg">This is monospace text, perfect for `code snippets`.</p>
  </div>

</body>
</html>

Note: You can set a default font for the entire site by applying a font class to the <body> element, as shown in the example (font-sans).

Using Custom Fonts

One of the most powerful features of Tailwind is its customizability. Adding your own custom fonts is a common requirement for real-world projects. Here’s the modern, recommended workflow.

Step 1: Import Your Font

First, you need to make the font available to your project. You can do this by linking to a service like Google Fonts in your HTML’s <head>, or by using @font-face rules in your main CSS file for self-hosted fonts.

Method A: Google Fonts (in index.html)

<!DOCTYPE html>
<html>
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Roboto+Mono&display=swap" rel="stylesheet">
  <link href="/dist/output.css" rel="stylesheet">
  <!-- ... -->
</head>
<body>
  <!-- ... -->
</body>
</html>

Method B: Self-Hosted (in src/input.css)

src/input.css

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 2: Add the Font to Your Theme

Next, register your new font in the tailwind.config.js file by extending the fontFamily key. This makes Tailwind aware of your font and allows it to generate a corresponding utility class (e.g., font-inter).

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './src/**/*.{html,js}',
  ],
  theme: {
    extend: {
      fontFamily: {
        // Add 'Inter' to the front of the sans-serif stack
        'sans': ['Inter', ...defaultTheme.fontFamily.sans],
        // Create a new utility class 'font-roboto-mono'
        'roboto-mono': ['"Roboto Mono"', 'monospace'],
      },
    },
  },
  plugins: [],
}

Pro Tip: Spreading ...defaultTheme.fontFamily.sans ensures you keep Tailwind’s excellent fallback fonts.

Step 3: Use Your Custom Font

After configuring your theme and rebuilding your CSS, you can now use your new font classes in your HTML.

<body class="font-sans"> <!-- Now defaults to Inter -->
  <h1 class="text-2xl">My website uses the Inter font.</h1>
  <code class="font-roboto-mono">This code block uses Roboto Mono.</code>
</body>

Common Issues & Debugging

• Font Not Applying? Ensure your tailwind.config.js content paths are correct and include the file where you’re using the class. The JIT engine relies on this to generate the necessary CSS.
• Rebuild Your CSS: After any change to tailwind.config.js, you must restart or re-run your build process for the changes to take effect.
• Check Font Names: The name you use in tailwind.config.js must match the font family name defined in your @font-face rule or imported from Google Fonts. Watch out for spaces and quotes!