liveBook · Manning

Fallback

As explained in CSS in Depth, Second Edition

Fallback is the font-display value that permits a brief invisible-text period, then uses the fallback font until the web font loads.

A web font can leave text invisible while it loads or show a fallback font before switching. Set `font-display: fallback` inside an `@font-face` rule to take a middle course: text is invisible briefly, then appears in the fallback font if the web font is not ready. When the web font loads, it replaces the fallback font. section 12.5.1

Choose the loading behavior to fit the connection and the design:

  • `fallback` works well on fast connections, where the brief invisible period may end before a font switch is visible. If loading takes longer than about 100 ms, readers may see the fallback font switch to the web font. section 12.5.1
  • `swap` shows the fallback font immediately, making it a better choice on slow connections. `optional` can keep the fallback font when loading takes too long, which suits a web font that is less vital to the design. section 12.5.1

Changing a Google Fonts loading choice

A Google Fonts stylesheet URL with `&display=swap` produces `font-display: swap` rules. Change that parameter to `&display=fallback` to use the brief invisible period instead of showing the fallback font immediately. section 12.5.1

How CSS in Depth, Second Edition covers it

How deep it goes
Explains the visible loading sequence and connection-speed trade-offs, but defers deeper web-font performance treatment.
Examples
Uses a Google Fonts `&display=swap` URL parameter that can be changed to select `fallback`.
What you can do after
Operate/configure it by selecting `font-display: fallback` in `@font-face` or a Google Fonts URL.
How it connects
Relates `@font-face` and web fonts to invisible text, fallback fonts, and visible font swapping.

Also explained in

Compare how 15 books explain fallback →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of CSS in Depth, Second Edition. The section links point to the parts of the book it draws on.