---
title: "Next.js 16 Google Fonts: Global Inter & Exo 2 Setup"
slug: "nextjs-16-google-fonts-inter-exo-2"
published: "2025-11-12"
updated: "2025-11-12"
validated: "2025-11-12"
categories:
  - "Next.js"
tags:
  - "Next.js 16 Google Fonts"
  - "next/font/google"
  - "Inter font Next.js"
  - "Exo 2 Next.js"
  - "Tailwind CSS fonts"
  - "self-host Google Fonts"
  - "prevent layout shift"
  - "global typography Next.js"
  - "font variables CSS"
  - "app directory Next.js"
llm-intent: "reference"
audience-level: "intermediate"
framework-versions:
  - "next.js@16"
  - "react@18"
  - "typescript@5"
  - "tailwindcss@4"
  - "node@18+"
status: "stable"
llm-purpose: "Next.js 16 Google Fonts: self-host Inter (body) and Exo 2 (headings) with next/font/google + Tailwind to prevent layout shift—read the quick guide now."
llm-prereqs:
  - "Access to Next.js 16"
  - "Access to next/font/google"
  - "Access to Tailwind CSS"
  - "Access to TypeScript"
  - "Access to React"
llm-outputs:
  - "Completed outcome: Next.js 16 Google Fonts: self-host Inter (body) and Exo 2 (headings) with next/font/google + Tailwind to prevent layout shift—read the quick guide now."
---

**Summary Triples**
- (next/font/google, self-hosts fonts and prevents, layout shift when used from the app/layout root)
- (Inter, configured with, Inter({ variable: '--font-inter', subsets: ['latin'] }))
- (Exo 2, configured with, Exo_2({ variable: '--font-exo-2', subsets: ['latin'] }))
- (Root layout (app/layout.tsx), must include, font variable classes on the html/body element to make them available app-wide)
- (Tailwind CSS, should reference, CSS variables (e.g., var(--font-inter)) in fontFamily to apply fonts via utility classes)
- (Validation, is done by, checking network requests for _next/static/fonts and running Lighthouse for CLS=0)

### {GOAL}
Next.js 16 Google Fonts: self-host Inter (body) and Exo 2 (headings) with next/font/google + Tailwind to prevent layout shift—read the quick guide now.

### {PREREQS}
- Access to Next.js 16
- Access to next/font/google
- Access to Tailwind CSS
- Access to TypeScript
- Access to React

### {STEPS}
1. Import fonts using next/font/google in layout
2. Apply font variables and body class
3. Map fonts into Tailwind theme variables
4. Auto-apply heading font via base layer
5. Test and deploy, verify layout shift

<!-- llm:goal="Next.js 16 Google Fonts: self-host Inter (body) and Exo 2 (headings) with next/font/google + Tailwind to prevent layout shift—read the quick guide now." -->
<!-- llm:prereq="Access to Next.js 16" -->
<!-- llm:prereq="Access to next/font/google" -->
<!-- llm:prereq="Access to Tailwind CSS" -->
<!-- llm:prereq="Access to TypeScript" -->
<!-- llm:prereq="Access to React" -->
<!-- llm:output="Completed outcome: Next.js 16 Google Fonts: self-host Inter (body) and Exo 2 (headings) with next/font/google + Tailwind to prevent layout shift—read the quick guide now." -->

# Next.js 16 Google Fonts: Global Inter & Exo 2 Setup
> Next.js 16 Google Fonts: self-host Inter (body) and Exo 2 (headings) with next/font/google + Tailwind to prevent layout shift—read the quick guide now.
Matija Žiberna · 2025-11-12

I was setting up typography for a manufacturing website when I realized I needed different fonts for headings versus body text. Rather than manually applying fonts to every component, I discovered Next.js 16's built-in `next/font/google` module handles everything elegantly—with automatic self-hosting and zero layout shift.

Here's the exact process I used to set up Inter for body text and Exo 2 for all headings, globally.

## Step 1: Import and Configure Your Fonts

Open your root layout file and import the fonts you want from `next/font/google`. In this case, we're using Inter for body text and Exo 2 for headings.

```typescript
// File: app/layout.tsx
import type { Metadata } from "next";
import { Geist, Geist_Mono, Inter, Exo_2 } from "next/font/google";
import { Toaster } from "sonner";
import Navbar from "@/app/components/navbar";
import Footer from "@/app/components/footer";
import { navbarExample, footerExample } from "@/app/data";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

const inter = Inter({
  variable: "--font-inter",
  subsets: ["latin"],
});

const exo2 = Exo_2({
  variable: "--font-exo-2",
  subsets: ["latin"],
});
```

Each font is initialized with a CSS variable name (like `--font-inter`). This variable becomes available throughout your application. The `subsets: ["latin"]` option ensures only the Latin character set is loaded, optimizing performance.

## Step 2: Apply Fonts to the Root Layout

Update your HTML body to include the font variables and the default body font class:

```typescript
// File: app/layout.tsx (continued)
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html>
      <body
        className={`${geistSans.variable} ${geistMono.variable} ${inter.variable} ${exo2.variable} ${inter.className} antialiased`}
      >
        <Navbar data={navbarExample} />
        {children}
        <Footer data={footerExample} />
        <Toaster />
      </body>
    </html>
  );
}
```

Notice we're including all font variables (making them available via CSS) and applying `inter.className` to the body itself, which sets Inter as the default font for all text content.

## Step 3: Update Your Tailwind Theme Configuration

Now configure Tailwind to use these fonts. Update your `globals.css` file to map the font variables into Tailwind's theme:

```css
/* File: app/globals.css */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-inter);
  --font-mono: var(--font-geist-mono);
  --font-heading: var(--font-exo-2);
  /* ... rest of your theme ... */
}
```

By setting `--font-sans: var(--font-inter)`, Tailwind will use Inter for all body text by default. The new `--font-heading: var(--font-exo-2)` line creates a custom font family that we'll use for headings.

## Step 4: Apply Headings Font Automatically

In the same `globals.css` file, add a base layer rule that applies the heading font to all heading elements:

```css
/* File: app/globals.css */
@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
  h1, h2, h3, h4, h5, h6 {
    @apply font-heading;
  }
}
```

This CSS rule is the magic piece. Every `h1` through `h6` element in your entire application will automatically use the Exo 2 font. No component modifications needed.

## How This All Works Together

When your application loads, Next.js automatically:
1. Optimizes the Google Fonts (removes external network requests)
2. Self-hosts them from your domain
3. Prevents layout shift by properly sizing fonts during load
4. Applies Inter as the default body font via the `inter.className` on your body element
5. Makes `--font-exo-2` available as a CSS variable

Your Tailwind configuration then maps these fonts into utility classes (`font-sans` for body, `font-heading` for headings), and the base layer rule ensures every heading automatically gets the Exo 2 treatment without manual intervention in any component.

## Result

You now have a complete, global font system where:
- All body text uses Inter
- All headings automatically use Exo 2
- Zero components need modification
- Fonts are self-hosted and optimized
- No external requests or layout shift

The beauty of this approach is that any component using standard semantic HTML heading tags (`h1`, `h2`, etc.) automatically gets the right font. No need to add classes or think about typography in individual components.

---

Let me know in the comments if you have questions, and subscribe for more practical development guides.

Thanks, Matija

## LLM Response Snippet
```json
{
  "goal": "Next.js 16 Google Fonts: self-host Inter (body) and Exo 2 (headings) with next/font/google + Tailwind to prevent layout shift—read the quick guide now.",
  "responses": [
    {
      "question": "What does the article \"Next.js 16 Google Fonts: Global Inter & Exo 2 Setup\" cover?",
      "answer": "Next.js 16 Google Fonts: self-host Inter (body) and Exo 2 (headings) with next/font/google + Tailwind to prevent layout shift—read the quick guide now."
    }
  ]
}
```