How to Use Next Font with TailwindCSS 4.0 (No Config File Needed)

May 15, 2025npmix

390

Share

📌 Introduction

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:

• Add custom fonts using Next Font
• Apply those fonts using Tailwind CSS 4.0
• Use CSS variables to simulate config-level control

Let’s dive in! 🚀

✅ Prerequisites

Before you begin, ensure the following are installed:

• Next.js 13+ project (app directory structure)
• Tailwind CSS 4.0
• Google Fonts via next/font/google

📁 Step 1: Import and Configure the Font

Open your page.tsx or layout file and import a Google font using the new next/font/google system.

1import { Bookerly } from 'next/font/google';
2
3const bookerly = Bookerly({
4  subsets: ['latin'],
5  weight: ['400'],
6  variable: '--font-bookerly',
7});
8
9export default function Home() {
10  return (
11    <main className={bookerly.variable}>
12      <div className="text-xl">
13        Hello with Bookerly Font 👋
14      </div>
15    </main>
16  );
17}

💡 Why use variable? It maps your Google font to a CSS variable that you can reuse in your global styles.

🎨 Step 2: Declare Font Variable in CSS

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):

1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4
5:root {
6  --font-main: var(--font-bookerly);
7}

Now you've established a CSS variable --font-main that can be used across your Tailwind utility classes.

🏷️ Step 3: Apply the Font via Tailwind

Back in your component, apply the font using Tailwind’s font- syntax with [var(--font-name)] syntax:

1<div className="font-[var(--font-main)]">
2  This text uses the custom Bookerly font.
3</div>

⚠️ Remember: font-[var(--font-main)] is how you bind CSS variables with Tailwind’s arbitrary value support.

🧪 Final Result

If done correctly, your font should now render properly in the browser. This setup:

• Uses no Tailwind config
• Works with Tailwind 4.0's zero-config system
• Keeps font logic modular and scalable

✅ You’re done! Fonts with modern CSS and full framework support.

🛠 Troubleshooting Tips

🔍 Font not applying?

• Double-check the className is using font-[var(--font-main)]
• Ensure you wrapped the page or layout with the bookerly.variable

📦 Not seeing Google Fonts load?

• Ensure Next.js automatically inlines fonts using the next/font/google module
• Check your browser dev tools → Network → Fonts

❓ Frequently Asked Questions

Can I still use tailwind.config.js if I want?

Yes, but Tailwind 4.0 encourages zero-config setups. You can opt in if needed.

What is the benefit of next/font?

It optimizes font loading automatically and avoids CLS (cumulative layout shift).

Can I define multiple font variables?

Absolutely. Just create different font imports with their own variable names and map accordingly.

📚 Related Tutorials

• How to Setup Tailwind CSS 4.0 in Next.js
• Dark Mode with CSS Variables and Tailwind
• Theme Switching with CSS Variables in Next.js

🚀 Next Steps

• Try adding another font (e.g. Inter, Roboto) and create fallback stacks.
• Use font variables in a full component library like shadcn/ui.
• Explore dynamic theming and responsive typography with 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.