Font loading has more impact on perceived performance than most developers realise. Here is our complete approach.
The font-display property
font-display: swap shows fallback text immediately and swaps in the web font when it loads. This eliminates FOIT (Flash of Invisible Text) but creates FOUT (Flash of Unstyled Text). For most sites, FOUT is preferable to invisible content.
font-display: optional is our choice for body text on performance-critical pages. It shows the fallback font if the web font is not cached and never causes a layout shift by swapping in late.
Variable fonts
Variable fonts reduce HTTP requests dramatically. Instead of loading Regular (400), Bold (700), and Italic separately, a single variable font file covers the entire weight and style range. File size is typically 30–40% smaller than the equivalent set of static fonts.
Preloading
Preload the font files used above the fold: . Only preload 1–2 font files. Over-preloading competes with other critical resources.
