How does next/font optimize fonts?

Question

Accepted Answer

`next/font` automatically optimizes web fonts to improve performance and eliminate layout shift — self-hosting fonts at build time and handling the loading details for you. ## Using a Google Font ```tsx // app/layout.tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], // only load the character sets you need (smaller files) display: "swap", // show fallback text immediately, swap when font loads }); export default function RootLayout({ children }) { return ( {/* apply the font */} {children} ); } ``` ## What it does automatically - **Self-hosting** — at build time, Next downloads the Google Font and serves it from **your** domain. No request to Google's servers at runtime → faster and better for privacy (no third-party tracking). - **Zero layout shift** — it computes the fallback font's metrics to match the web font, so when the real font swaps in, text doesn't jump (protects CLS). - **Preloading & subsetting** — preloads the font and includes only the specified character subsets, shrinking the download. - **No render-blocking request** — fonts are part of your build, not a blocking external fetch. ## Local fonts ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Why font optimization matters Fonts are a classic performance and CLS problem: a third-party fetch that blocks text rendering, then causes a layout jump when the font loads (FOUT/FOIT). Doing this well manually requires `@font-face`, `font-display`, preloading, and fallback-metric matching. ## Why it matters `next/font` automates the entire font-performance checklist — self-hosting (speed + privacy), subsetting and preloading (smaller, faster), and fallback metric matching (no layout shift) — behind one import. It removes a fiddly, easy-to-get-wrong optimization and is the recommended way to use both Google and local fonts in Next.js.