How To Use Custom Google Fonts in Next.js 15 and Tailwind v4

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>