next/font

Definition

A built-in Next.js system that automatically optimizes web fonts (like Google Fonts or local custom fonts) and entirely removes layout shifts.

Explain Like I'm New

Historically, you pasted a Google Fonts link into your HTML. The browser loaded your text in a generic ugly font, then downloaded the Google Font, and then violently swapped the fonts, causing the whole page to jitter. `next/font` downloads the font file *at build time* and serves it locally, guaranteeing zero jitter.

Real World Example

Implementing the 'Inter' or 'Roboto' font globally across your entire Next.js application with 3 lines of code and zero privacy issues (since the browser never talks to Google's servers).

Common Use Cases

•Typography
•Performance optimization
•GDPR compliance

Interactive Example

Interview Questions

basic

Does `next/font/google` make an HTTP request to Google's servers every time a user visits your site?

intermediate

What is Cumulative Layout Shift (CLS), and how does `next/font` prevent it?

Flash Cards

Question

HTTP request to Google?

Click to reveal answer

Answer

No! Next.js downloads the font file to your own server during the `npm run build` step. The user's browser only talks to your server, ensuring extreme speed and perfect privacy.

Question

Prevent CLS?

Click to reveal answer

Answer

CLS is when the page jumps around while loading. `next/font` uses a CSS property called `size-adjust` to mathematically force the temporary fallback font to be the EXACT same physical dimensions as the final font, making the swap completely invisible.