Styla saysfont-display controls what shows while a custom font loads — swap is the usual choice.
Inside @font-face, font-display decides loading behavior. swap shows fallback text immediately then swaps in the custom font (no invisible text). optional uses the font only if it loads fast. This avoids FOIT (flash of invisible text) and late-swap jank.
Power-ups you unlock
font-display:swap shows fallback then swaps
optional skips the font if it’s slow
Prevents FOIT (invisible text on load)
Pair with a metric-matched fallback
The Specificity Sphinx attacks — common mistakes
Default (block) hiding text up to 3s
Ignoring layout shift when the swap happens
Leaving it to the browser’s auto guess
Boss battleAdd font-display:swap to an @font-face and reason about what the user sees on a slow load.
Example code
<!doctype html><html><head><meta charset="utf-8">
<style>@font-face{font-family:'Brand';src:url('brand.woff2') format('woff2');font-display:swap}body{font-family:'Brand',sans-serif;color:#e6e0ff;background:#06040d;padding:20px}</style></head><body><p>fallback shows instantly, then swaps.</p></body></html>