What is font optimization for web performance?

Web fonts are a common source of performance problems. Key optimizations: Preload critical fonts: <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin> — loads the font early, before the CSS is parsed. Only preload the font used above the fold. font-display property: controls text rendering during font loading. font-display: swap: show fallback text immediately, swap when font loads (can cause CLS). font-display: optional: use font only if available within a short timeout, don't swap — best for LCP text and CLS prevention. font-display: block: invisible text for up to 3 seconds (FOIT — Flash of Invisible Text) — avoid. WOFF2 format: smallest file size, supported in all modern browsers. Subsetting: include only the characters needed. Variable fonts: one font file for multiple weights/styles. System font stack: skip web fonts entirely: font-family: system-ui, -apple-system, sans-serif — fast but less distinctive. Next.js, Astro, and Nuxt have built-in font optimization that automatically applies best practices.