Font loading strategy (font-display: swap, FOUT/FOIT)
The rule for what a browser shows while your custom font downloads: blank text, fallback text that swaps in later, or neither.
See it
What it is
A web font is a file, and a file takes time. Your font loading strategy decides what the browser shows in the meantime. FOIT (flash of invisible text) hides the words until the font arrives, so the page looks broken and empty. FOUT (flash of unstyled text) paints a system fallback immediately and swaps in the real font when it lands, so the words are readable but they visibly change shape.
The dial is the CSS 'font-display' descriptor inside '@font-face': 'block' gives you FOIT, 'swap' gives you FOUT, 'fallback' allows a tiny 100ms invisible window then gives up after 3 seconds, and 'optional' lets the browser skip the font entirely on a bad connection. Body copy usually wants 'swap' so people can start reading. Pair it with self-hosted woff2 files and a preload for the one or two faces used above the fold.
The gotcha: 'swap' trades invisible text for layout shift. If your fallback is Arial and your real font is a wide display serif, every line rewraps at swap time and you eat a CLS penalty. Fix it by metric-matching the fallback with 'size-adjust', 'ascent-override', and 'descent-override' (this is what next/font and Fontaine generate for you), not by going back to hiding the text.
Ask AI for it
Set up a font loading strategy for this site. Self-host the font as woff2, declare it in an @font-face block with 'font-display: swap', and add a <link rel=preload as=font type=font/woff2 crossorigin> for only the single weight used above the fold. Then kill the swap-time layout shift: define a metric-matched local fallback @font-face using size-adjust, ascent-override, and descent-override tuned to the real font, and reference it as the second entry in the font-family stack. Subset the file to the characters actually used.