Font optimization (next/font) in Next.js

What is next/font?

next/font is Next.js's built-in font optimization system. It automatically self-hosts fonts (including Google Fonts), eliminates external network requests, and prevents layout shift (CLS) with automatic size-adjust.

Google Fonts

tsx

// app/layout.tsx
import { Inter, Roboto_Mono } from "next/font/google";

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

const robotoMono = Roboto_Mono({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-roboto-mono",
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${inter.variable} ${robotoMono.variable}`}>
      <body className={inter.className}>
        {children}
      </body>
    </html>
  );
}

Local Fonts

tsx

import localFont from "next/font/local";

const myFont = localFont({
  src: [
    { path: "./fonts/MyFont-Regular.woff2", weight: "400", style: "normal" },
    { path: "./fonts/MyFont-Bold.woff2", weight: "700", style: "normal" },
    { path: "./fonts/MyFont-Italic.woff2", weight: "400", style: "italic" },
  ],
  display: "swap",
  variable: "--font-my-font",
});

Using CSS Variables

tsx

// layout.tsx — apply variable
<html className={inter.variable}>

// In CSS/Tailwind
// globals.css
body {
  font-family: var(--font-inter), sans-serif;
}

code {
  font-family: var(--font-roboto-mono), monospace;
}

// tailwind.config.ts
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-inter)"],
        mono: ["var(--font-roboto-mono)"],
      },
    },
  },
};

Key Options

Option	Description	Example
`subsets`	Character sets to include	`["latin", "cyrillic"]`
`weight`	Font weights to load	`["400", "700"]` or `"variable"`
`display`	CSS font-display value	`"swap"`, `"block"`, `"auto"`
`variable`	CSS custom property name	`"--font-inter"`
`preload`	Preload the font (default: true)	`true` / `false`
`fallback`	Fallback font families	`["system-ui", "arial"]`
`adjustFontFallback`	Auto size-adjust for fallback	`true` / `false`

How It Works

Build time: Next.js downloads the font files
Self-hosted: Fonts served from your domain (no external requests)
size-adjust: Automatic CSS size-adjust to minimize CLS
Preloaded: Font files are preloaded for fast rendering

Benefits

No external requests — fonts are self-hosted (GDPR-compliant, faster)
Zero layout shift — automatic size-adjust for fallback fonts
Automatic subsetting — only downloads characters you need
Caching — immutable font files with long cache headers
No flash of unstyled text — preloaded and optimized

Important:

next/font eliminates the performance problems of web fonts: no external network requests, no layout shift, and automatic optimization. Always use it instead of manually loading Google Fonts via <link> tags. Use CSS variables (variable option) for maximum flexibility with Tailwind CSS.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems

Font optimization (next/font) in Next.js

#What is next/font?

#Google Fonts

#Local Fonts

#Using CSS Variables

#Key Options

#How It Works

#Benefits