<Font>

Zero-roundtrip font hosting and layout shift prevention.

Next.js3 min readConcept 51 of 65

The next/font module

next/font includes built-in loaders for any Google Font or local custom font.

Instead of the browser making a network request to fonts.googleapis.com when the user visits your site, Next.js downloads the font files exactly once at build time.

The fonts are then hosted alongside your static assets, requiring zero external network roundtrips.

Layout Shift & Flash of Unstyled Text

When using standard web fonts, the browser often shows a system fallback font (like Arial) while the custom font downloads.

Because Arial and your custom font have different character widths, swapping them causes the entire paragraph to reflow and shift down the page, ruining the user experience (CLS).

Next.js completely eliminates this by automatically generating a CSS size-adjust property that perfectly scales the fallback font to match the custom font's exact dimensions.

Implementation

1. Import the font: import { Inter } from 'next/font/google'

2. Initialize it: const inter = Inter({ subsets: ['latin'] })

3. Apply it globally (usually in your Root Layout): <body className={inter.className}>

The CLS Simulator

Watch how a standard web font causes a jarring layout shift when the font swaps, compared to the next/font module which perfectly scales the fallback font using CSS size-adjust.

Standard Web Font

The quick brown fox jumps over the lazy dog.
Layout Shift (CLS)

next/font

The quick brown fox jumps over the lazy dog.
Zero Layout Shift

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1How does `next/font` prevent Layout Shift when the custom font finally loads?

Remember this

  • next/font downloads Google Fonts at build time and hosts them locally.
  • It prevents Cumulative Layout Shift (CLS) by automatically scaling the fallback font.
  • It improves privacy by removing external network requests to Google.
  • Apply the font's generated className in your Root Layout to apply it globally.

Done with this concept?

Mark it complete to track your progress. No login needed.