Google Fonts in Next.js 15 + Tailwind v4: Complete Setup

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

// 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

Google Fonts in Next.js 15 + Tailwind v4: Complete Setup

⚡ Next.js Implementation Guides

Related Posts: