---
title: "Google Fonts in Next.js 15 + Tailwind v4: Complete Setup"
slug: "how-to-use-custom-google-fonts-in-next-js-15-and-tailwind-v4"
published: "2025-06-13"
updated: "2025-12-26"
validated: "2025-10-20"
categories:
- "Next.js"
tags:
- "google fonts nextjs"
- "next/font"
- "tailwind v4 fonts"
- "CSS custom properties"
- "font variables nextjs"
- "font optimization"
- "custom fonts tailwind"
- "nextjs 15 typography"
llm-intent: "reference"
audience-level: "beginner"
framework-versions:
- "unspecified"
status: "stable"
llm-purpose: "Learn how to add and use custom Google Fonts in Next.js 15 with Tailwind CSS v4 using CSS variables and utility classes for clean, flexible typography."
llm-prereqs:
- "General familiarity with the article topic"
llm-outputs:
- "Completed outcome: Learn how to add and use custom Google Fonts in Next.js 15 with Tailwind CSS v4 using CSS variables and utility classes for clean, flexible typography."
---
**Summary Triples**
- (Font package, install, npm i @next/font)
- (Google Fonts import, use, import { FontName } from 'next/font/google' and set variable: '--font-yourname')
- (Font configuration, supports, subsets and weight arrays (e.g., subsets:['latin'], weight:['400','700']))
- (CSS custom property, created by, the font config variable property (e.g., variable: '--font-heading'))
- (HTML element, must include, all font variables as className values on to expose CSS variables)
- (Tailwind theme, map CSS vars to tokens using, @theme inline { --font-heading: var(--font-montserrat); } which yields utility classes like font-heading)
- (Usage, apply, use utility classes (e.g., className='font-heading') or manual CSS font-family: var(--font-heading))
### {GOAL}
Learn how to add and use custom Google Fonts in Next.js 15 with Tailwind CSS v4 using CSS variables and utility classes for clean, flexible typography.
### {PREREQS}
- General familiarity with the article topic
### {STEPS}
1. Follow the detailed walkthrough in the article content below.
# Google Fonts in Next.js 15 + Tailwind v4: Complete Setup
> Add Google Fonts to Next.js 15 + Tailwind v4: next/font setup, CSS variables, custom font classes, and zero layout shift. Complete configuration guide.
Matija Žiberna · 2025-06-13
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:
```bash
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:
```typescript
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:
```typescript
return (
{/* Your app content */}
);
```
## Step 4: Configure Tailwind v4 Theme
In your `globals.css` file, define your font mappings within the `@theme inline` block:
```css
@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:
```css
@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 text
- `font-heading` (Montserrat) to all heading elements (h1-h6)
## Using Your Custom Fonts
Once configured, you can use your fonts anywhere in your components:
```jsx
// Automatic application (no classes needed)
This uses Montserrat automatically
This uses Geist automatically
// Manual application with utility classes
This uses Corinthia
This forces Montserrat
This forces Geist
```
## 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
## LLM Response Snippet
```json
{
"goal": "Learn how to add and use custom Google Fonts in Next.js 15 with Tailwind CSS v4 using CSS variables and utility classes for clean, flexible typography.",
"responses": [
{
"question": "How do I add the 'Lato' Google Font to my Next.js 15 + Tailwind v4 project?",
"answer": "1) npm i @next/font. 2) In app/layout.tsx import Lato from 'next/font/google' and configure: const lato = Lato({ subsets:['latin'], weight:['400','700'], variable:'--font-lato' }). 3) Add lato.variable into the className. 4) In styles/globals.css map it: @theme inline { --font-body: var(--font-lato); } which creates font-body utility. 5) Use ."
},
{
"question": "My font isn't showing — what's the checklist to debug?",
"answer": "Check: (a) @next/font is installed; (b) you imported the font with a variable property; (c) the font.variable value is present in the className; (d) globals.css has the @theme inline mapping that references the variable; (e) rebuild dev server; (f) open inspector to confirm the CSS custom property exists and network requests for font files succeed."
},
{
"question": "How do I load specific font weights?",
"answer": "When importing from next/font/google include weight array: e.g., Montserrat({ weight:['400','700'] }). Then use Tailwind's font-weight utilities (font-normal, font-bold) or set font-weight in CSS. Only declared weights will be fetched/available."
},
{
"question": "Can I provide fallbacks for the custom font?",
"answer": "Yes. Use the generated CSS var with fallbacks: font-family: var(--font-heading), system-ui, -apple-system, 'Segoe UI', sans-serif."
},
{
"question": "Do I have to use the Tailwind utility classes or can I use the CSS variable directly?",
"answer": "Both are possible. The @theme inline mapping creates utilities like font-heading. Alternatively use the variable directly in CSS: .myClass { font-family: var(--font-heading); }"
},
{
"question": "Is the 'variable' property name important?",
"answer": "No — it's arbitrary. Pick a clear name (e.g., --font-heading) and reference that exact custom property in your globals.css mapping."
},
{
"question": "Does this require any special Tailwind v4 config?",
"answer": "No extra Tailwind config is strictly required for these utilities if you use @theme inline in globals.css as shown; ensure Tailwind v4 is installed and processing your globals.css."
}
]
}
```