next/font CSS Variable Self-Hosting & Metric Overrides
- Last updated
- Prerequisites:
- CSS `@font-face` rules
- Cumulative Layout Shift (CLS) basics
- nextjs
- next-font
- cls
- web-vitals
- fonts
- performance
Read at your depth
The practical view
`next/font` automatically self-hosts Google Fonts or local font files at build time. It downloads the font files during build and serves them from your domain, eliminating external Google network requests. It injects CSS with fallback font metric overrides (`size-adjust`, `ascent-override`) matching the fallback system font to the web font, eliminating Cumulative Layout Shift (CLS).
The same idea in other frameworks
Standard `@font-face` with manual font-pie / Capsize CSS metric overrides.Angular CLI automatic font inlining (`optimization.fonts`).Nuxt `@nuxtjs/google-fonts` or `@nuxt/fonts` with metric fallback generation.SvelteKit static asset serving with manual `font-display: swap` CSS.Legacy vs modern
External Google Font CDN vs next/font Self-Hosting
External `<link>` tags introduce layout shift and extra DNS lookups; `next/font` self-hosts and generates metric overrides.
<link href="https://fonts.googleapis.com/..." rel="stylesheet"> // ❌ OLD: Third-party DNS + CLSimport { Inter } from 'next/font/google'; // ✅ NEW: Self-hosted + 0 CLSInterview gotchas
Context
This tests knowledge of CSS font metric overrides and Capsize/font-pie mathematics.
The mechanical answer
`font-display: swap` normally causes layout shift when the custom font swaps in because fallback fonts (Arial, Times) have different glyph widths and line heights. `next/font` analyzes the custom font's metrics and injects an adjusted fallback `@font-face` using CSS properties like `size-adjust`, `ascent-override`, and `descent-override`, perfectly matching the fallback's box dimensions to the custom font.
Trap
Do not say that `next/font` avoids CLS by blocking rendering until the font downloads. It uses `font-display: swap` with metric-matched fallbacks.
Context
This checks compliance and privacy architecture knowledge (GDPR).
The mechanical answer
No. At build time, Next.js downloads the font files from Google and stores them in the static deployment artifact. In production, fonts are served directly from the same origin as your application; zero requests are sent to Google by the client browser.
Trap
Avoid stating that Next.js proxies font requests at runtime. The download happens strictly at build time.