Q72: How do Variable Font Subsetting and CSS Display Swap optimize font delivery in Next.js?
next/font strips unused glyph characters from font files via font subsetting (e.g. subsets: ['latin']), reducing font file sizes by up to 80%. When paired with display: 'swap', the browser renders fallback system fonts instantly, swapping in custom fonts once downloaded without blocking screen text rendering.
Key Takeaways
- Subsetting removes unused character glyphs to minimize font file byte size.
display: 'swap'prevents Flash of Invisible Text (FOIT) by utilizing system fallback fonts.
Knowledge Check
What performance issue is prevented by specifying display: 'swap' inside next/font declarations?