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 you still have the old @tailwind base / @tailwind components / @tailwind utilities directives, switch to that import first. Tailwind v4 expects it.

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 at the very top of the file. Browsers require @import URLs to come before other rules, including @import "tailwindcss".

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. You can still reach for 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.