Design AtlasA web font is a file, and files take time to download. What the browser shows in the meantime falls into two broad camps: FOIT (Flash of Invisible Text) hides text entirely until the font arrives, and FOUT (Flash of Unstyled Text) shows text immediately in a fallback font, then swaps to the custom font once it loads.
CSS `font-display` picks the strategy. `block` hides text briefly (typically ~3s), falls back if the font still hasn't arrived, and swaps in later when it does (closer to FOIT). `swap` shows the fallback immediately and swaps as soon as the font loads (FOUT). `fallback` hides only very briefly, then — once the swap window passes — sticks with the fallback permanently. `optional` gives up on the custom font entirely on a slow connection, using only the fallback — useful for avoiding layout shift once content has already settled.
This site loads no external fonts, so the demo simulates each strategy's timeline rather than a real font load — no actual network request happens, which the demo states plainly on screen. On slow connections (3G, low-end devices), `swap` improves perceived speed but can show a visible style "snap"; `optional` avoids that snap but risks never showing the custom font at all — a real trade-off, not a free win.
When to use
Use `swap` for body text that needs to be readable immediately; consider `optional` where layout shift must be avoided entirely. It's also common to just leave it at `auto`, the browser default.