font-display

font-display is a descriptor inside @font-face. It controls what the browser shows while a downloadable font is loading. Putting it in a normal selector has no effect.

A complete font rule

@font-face {
  font-family: "Hind";
  src: url("hind-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
body { font-family: "Hind", system-ui, sans-serif; }

Save the font file alongside the document, or change src to its actual URL. The font must be licensed for web use. The descriptor does not download a font by itself: the face must be used by a matching font-family rule.

What the values change

auto lets the browser choose. block allows a short period with invisible text before showing a fallback, and can swap to the downloaded font later. swap has an extremely short block period and allows a later swap. fallback allows only a short swap period. optional does not have a swap period after its extremely short block period, so the browser may keep the fallback for that page visit.

These timings are browser decisions, not fixed delays you can set with CSS. The initial value is auto. Descriptors do not inherit like element properties.

Observe it in a browser

1. Create a page using the rule above and a paragraph of text.
2. Open developer tools, disable the cache, and throttle the network.
3. Reload. Watch the paragraph before the font request finishes.
4. Compare swap and optional, reloading with the cache disabled each time.
5. Inspect the rendered font in developer tools. A font can download without becoming the rendered face.

This needs a real network load; a decorative preview cannot show the difference reliably. A cached font can make both settings look identical.

A practical choice

Use swap when showing text promptly and eventually using the chosen font are both priorities. Match the fallback’s metrics where possible: a large change in character widths can move surrounding content when the font swaps. optional can reduce late swapping at the cost of keeping the fallback. Check readability and layout stability under slow connections.

Sources

MDN: font-display explains the block, swap, and failure periods and links to compatibility data.