What is the Next.js Font optimization?
Why Interviewers Ask This
This is a classic screening question for Next.js roles. Hiring managers ask it early in interviews to gauge your baseline understanding and determine if you can communicate technical concepts clearly.
Answer
Next.js provides a built-in Font optimization system via next/font that automatically optimizes Google Fonts and custom fonts with zero layout shift and no external network requests. Google Fonts: import { Inter, Roboto_Mono } from "next/font/google"; const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap" }); const robotoMono = Roboto_Mono({ subsets: ["latin"], weight: ["400", "700"] }); // In root layout: <html className={inter.variable}><body className={robotoMono.className}>. How it works: at build time, Next.js downloads the font files from Google Fonts and self-hosts them alongside your app. The browser never makes a request to Google — privacy benefit + performance (no DNS lookup, no external request). Automatic font declaration with CSS custom properties for CSS variables or direct className. Local fonts: import localFont from "next/font/local"; const myFont = localFont({ src: "./fonts/MyFont.woff2", variable: "--font-my-font" });. Multiple weight files: src: [{ path: "./Regular.woff2", weight: "400" }, { path: "./Bold.woff2", weight: "700" }]. Benefits: (1) No external network requests (no Google tracking); (2) Zero layout shift — fonts are loaded with CSS size-adjust to match fallback fonts; (3) Subset only what you need; (4) Automatic preloading; (5) Works with CSS variables for flexible theming. display: "swap" — shows fallback font immediately while loading the custom font.
Common Mistake
Many candidates answer correctly but can't explain the 'why'. Always be prepared to justify your answer with a concrete example or use case from your Next.js experience.
Previous
What is the difference between client-side navigation and full page reload in Next.js?
Next
What is Next.js environment variables?