Google Fonts in Next.js 15 + Tailwind v4: Complete Setup
next/font setup, CSS variables, and Tailwind v4 font configuration
⚡ Next.js Implementation Guides
In-depth Next.js guides covering App Router, RSC, ISR, and deployment. Get code examples, optimization checklists, and prompts to accelerate development.
Related Posts:
Setting up custom Google Fonts in Next.js 15 with Tailwind CSS v4 is straightforward once you understand the key concepts. Here's how to do it properly.
Step 1: Install Next.js Font Package
First, you need to install the font package as it doesn't come by default:
npm i @next/font
Step 2: Import and Configure Your Fonts
In your layout.tsx file, import your desired Google Fonts and configure them with the variable property:
import { Corinthia, Geist, Montserrat } from 'next/font/google';
const corinthia = Corinthia({
subsets: ['latin'],
weight: ['400', '700'],
variable: '--font-corinthia'
})
const geist = Geist({
subsets: ['latin'],
weight: ['400', '700'],
variable: '--font-geist'
})
const montserrat = Montserrat({
subsets: ['latin'],
weight: ['400', '700'],
variable: '--font-montserrat'
})
Important: The variable property can be any name you choose. It creates a CSS custom property that you'll reference in your Tailwind configuration.
Step 3: Apply Font Variables to HTML
Add all your font variables to the HTML element:
return (
<html lang="en" className={`${corinthia.variable} ${geist.variable} ${montserrat.variable}`}>
<body>
{/* Your app content */}
</body>
</html>
);
Step 4: Configure Tailwind v4 Theme
In your globals.css file, define your font mappings within the @theme inline block:
@theme inline {
/* Other theme variables... */
--font-funky: var(--font-corinthia);
--font-heading: var(--font-montserrat);
--font-body: var(--font-geist);
--font-sans: var(--font-geist);
}
This creates Tailwind utility classes like font-heading, font-body, and font-funky that you can use throughout your application.
Step 5: Apply Fonts Automatically with Base Styles
Add base styles to automatically apply fonts to specific elements:
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground font-body;
}
h1, h2, h3, h4, h5, h6 {
@apply font-heading;
}
}
This configuration automatically applies:
font-body(Geist) to all body textfont-heading(Montserrat) to all heading elements (h1-h6)
Using Your Custom Fonts
Once configured, you can use your fonts anywhere in your components:
// Automatic application (no classes needed)
<h1>This uses Montserrat automatically</h1>
<p>This uses Geist automatically</p>
// Manual application with utility classes
<div className="font-funky">This uses Corinthia</div>
<span className="font-heading">This forces Montserrat</span>
<p className="font-body">This forces Geist</p>
Key Benefits
- Automatic font loading: Next.js optimizes font loading
- CSS custom properties: Clean integration with Tailwind v4
- Flexible naming: Choose any variable names that make sense for your project
- Automatic application: Base styles handle common use cases
- Utility classes: Manual control when needed
That's it! Your custom Google Fonts are now fully integrated with Next.js 15 and Tailwind CSS v4.
Thanks, Matija
