Adding Fonts to Tailwind CSS 4

Want to use custom fonts in Tailwind CSS 4? Super easy! Just follow these steps.

1. Load Your Font

First, load your font in the <head> of your page. You can do it with a <link> tag:

<link href="https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap" rel="stylesheet">

Or using @import inside a <style> tag:

<style>
  @import url('https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap');
</style>

Now, let's add it to Tailwind!

2. Adding Fonts to Tailwind

There are three ways to use custom fonts in Tailwind. Pick the one that works best for you.

Option 1: Replace the Default Font Classes

If you want to replace Tailwind’s default fonts, update your tailwind.config.js like this:

// tailwind.config.js
export default {
  theme: {
    fontFamily: {
      nunito: ['Nunito', 'sans-serif'],
      myFont: ['"My Font"', 'serif'] // Wrap names with spaces in quotes
    },
  }
}

Now, you can use .font-nunito or .font-myFont in your HTML:

<p class="font-nunito">Hello, Tailwind!</p>

⚠ Note: This removes the default sans, serif, and mono classes unless you add them back manually.

Option 2: Extend Tailwind’s Default Fonts

Want to add a new font without losing the default ones? Use extend in your config:

// tailwind.config.js
import defaultTheme from 'tailwindcss/defaultTheme'

export default {
  theme: {
    extend: {
      fontFamily: {
        nunito: ['Nunito', 'sans-serif']
      }
    }
  }
}

Now .font-nunito will work alongside the default font-sans, font-serif, and font-mono classes.

Option 3: Modify an Existing Font Stack

Want to merge your font into an existing Tailwind font stack? Do this:

// tailwind.config.js
import defaultTheme from 'tailwindcss/defaultTheme'

export default {
  theme: {
    fontFamily: {
      sans: ['Nunito', ...defaultTheme.fontFamily.sans],
      serif: [...defaultTheme.fontFamily.serif],
      mono: [...defaultTheme.fontFamily.mono]
    }
  }
}

This keeps Tailwind’s default font stacks but puts your font at the top of the list.

/* Generated CSS */
.font-sans {
  font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

That’s it! 🎉 Now you can use custom fonts in Tailwind CSS 4 however you like. 🚀

Loading...