next/font setup, CSS variables, and Tailwind v4 font configuration
In-depth Next.js guides covering App Router, RSC, ISR, and deployment. Get code examples, optimization checklists, and prompts to accelerate development.
No spam. Unsubscribe anytime.
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.
First, you need to install the font package as it doesn't come by default:
npm i @next/font
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.
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>
);
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.
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)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>
That's it! Your custom Google Fonts are now fully integrated with Next.js 15 and Tailwind CSS v4.
Thanks, Matija