How to use custom fonts with Tailwind CSS

Assuming you have an app configured to use Tailwind CSS v4, your CSS file starts with:

@import "tailwindcss";

If your file still has the @tailwind base / @tailwind components / @tailwind utilities directives from v3, replace them with that import.

Go on Google Fonts for example, select a font, and you’ll be provided an @import for the CSS font.

For example this for the Inter font:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;700;900&display=swap');

Put the Google Fonts import above @import "tailwindcss". The Tailwind build replaces that line with the generated CSS, and browsers ignore an @import that comes after other rules. With the order swapped, the font import ends up buried in the output and the font never loads.

Then register the font in @theme so Tailwind’s font-sans utility uses it:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;700;900&display=swap');
@import "tailwindcss";

@theme {
  --font-sans: Inter, system-ui, sans-serif;
}

Now font-sans uses Inter, and so does the whole page. Tailwind’s base styles set the html font to --font-sans, so you don’t need the @layer base { html { font-family } } rule we used in v3. You can still use font-bold, font-medium and the other weight utilities as usual.

If you want a separate utility, like font-display, add another theme variable:

@theme {
  --font-display: Inter, system-ui, sans-serif;
}

Then use font-display in your markup.

For a full Vite install of Tailwind v4, see Setting up Tailwind CSS on Vite.

Want me to talk about your product? You can sponsor this site.