Demo

Font Optimization

next/font provides automatic font optimization with zero layout shift.
Fonts are self-hosted at build time, eliminating external network requests.
Use next/font/google for Google Fonts or next/font/local for custom font files.
Font metrics are calculated automatically to prevent Cumulative Layout Shift (CLS).
Fonts are preloaded and served from your domain, improving privacy and performance.
Apply fonts via CSS variables for flexible styling across your application.

app/layout.tsx

1import { Inter, Roboto_Mono } from 'next/font/google';
2
3const inter = Inter({
4  subsets: ['latin'],
5  variable: '--font-inter',
6  display: 'swap',
7});
8
9const robotoMono = Roboto_Mono({
10  subsets: ['latin'],
11  variable: '--font-roboto-mono',
12});
13
14export default function RootLayout({
15  children,
16}: {
17  children: React.ReactNode;
18}) {
19  return (
20    <html className={`${inter.variable} ${robotoMono.variable}`}>
21      <body>{children}</body>
22    </html>
23  );
24}

Font Loading Strategies

Option	Behavior
`display: 'swap'`	Show fallback immediately, swap when loaded
`display: 'block'`	Hide text briefly, then show custom font
`display: 'optional'`	Use custom font only if already cached
`preload: true`	Preload font files (default for used fonts)

Demo

Inspect the rendered fonts - notice no flash of unstyled text.
Check the network panel - fonts are served from your domain.
Throttle the network - content still renders cleanly with fallback fonts.

Visual Summary

Font optimization pipeline

Declare font

Build-time fetch

Self-host

Preload

Render

Self-hosting removes third-party latency and improves privacy.

Key Takeaways

Topic	Guidance
Performance	No external DNS/TLS overhead for font loading
CLS	Zero layout shift with precomputed font metrics
Privacy	No external font service calls in production
Flexibility	CSS variables enable theme-based font switching

Pitfalls and Tips

Use subsets to include only the character sets you need, reducing file size.
Avoid loading multiple font families unless your design requires them.
Prefer display: 'swap' for body text to ensure content is readable immediately.
Use CSS variables to apply fonts consistently across components.

Learn More

Sans-Serif Fonts

Geist Sans

The quick brown fox jumps over the lazy dog

Inter

The quick brown fox jumps over the lazy dog

Monospace Fonts

Geist Mono

const greeting = "Hello, World!";
console.log(greeting);

Roboto Mono

function add(a: number, b: number) {
  return a + b;
}

Serif Fonts

Playfair Display

The quick brown fox jumps over the lazy dog

Elegant serif typography

How it works

app/layout.tsxtsx

The App Router Gallery

Geist Sans

Inter

Geist Mono

Roboto Mono

Playfair Display