How to Use Next Font with TailwindCSS 4.0 (No Config File Needed)
......
Loading...
Similar articles
Never miss an update
Subscribe to receive news and special offers.
By subscribing you agree to our Privacy Policy.
Never miss an update
Subscribe to receive news and special offers.
By subscribing you agree to our Privacy Policy.
Tailwind CSS 4.0 removes the tailwind.config.js file by default, which changes how we customize fonts and themes. But don't worry—if you're using Next.js and want to implement Google Fonts with Next Font, you can still get the job done using CSS variables.
In this tutorial, you'll learn how to:
Let’s dive in! 🚀
Before you begin, ensure the following are installed:
next/font/googleOpen your page.tsx or layout file and import a Google font using the new next/font/google system.
import { Bookerly } from 'next/font/google';
const bookerly = Bookerly({
subsets: ['latin'],
weight: ['400'],
variable: '--font-bookerly',
});
export default function Home() {
return (
<main className={bookerly.variable}>
<div className="text-xl">
Hello with Bookerly Font 👋
</div>
</main>
);
}💡 Why use
variable? It maps your Google font to a CSS variable that you can reuse in your global styles.
Since Tailwind 4.0 doesn’t use a tailwind.config.js file, you’ll need to define your custom font variables manually in your CSS file.
Edit your globals.css (or wherever you define base styles):
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--font-main: var(--font-bookerly);
}Now you've established a CSS variable --font-main that can be used across your Tailwind utility classes.
Back in your component, apply the font using Tailwind’s font- syntax with [var(--font-name)] syntax:
<div className="font-[var(--font-main)]">
This text uses the custom Bookerly font.
</div>⚠️ Remember:
font-[var(--font-main)]is how you bind CSS variables with Tailwind’s arbitrary value support.
If done correctly, your font should now render properly in the browser. This setup:
✅ You’re done! Fonts with modern CSS and full framework support.
font-[var(--font-main)]bookerly.variablenext/font/google moduletailwind.config.js if I want?Yes, but Tailwind 4.0 encourages zero-config setups. You can opt in if needed.
next/font?It optimizes font loading automatically and avoids CLS (cumulative layout shift).
Absolutely. Just create different font imports with their own variable names and map accordingly.
shadcn/ui.clamp() and :root variables.That’s a wrap! You’ve now set up Google Fonts using Next Font + Tailwind CSS 4.0—all without a Tailwind config file.