Fout

As explained in CSS in Depth, Second Edition

FOUT, or Flash of Unstyled Text, is the visual effect in which fallback-font text appears before the intended web font loads and the page then shifts when the intended font renders.

FOUT, or Flash of Unstyled Text, occurs when a browser displays fallback-font text before a web font loads. When the intended font renders, its different dimensions can shift the layout and interrupt reading. section 12.5

The browser’s font-loading choices create different visible trade-offs:

• FOUT displays the fallback font immediately, then replaces it with the web font when available. section 12.5.1
• FOIT keeps text invisible while the web font loads, preserving space but risking a blank, unusable page if loading is delayed or fails. section 12.5
• font-display: fallback briefly hides text before showing the fallback, while optional may leave the fallback in place on slower connections. section 12.5.1

Testing a font-loading choice

Throttle the network in Chrome or Firefox DevTools, reload a page using a web font, and observe whether fallback text appears immediately, disappears briefly, or remains invisible. This exposes layout shifts and delayed or failed font loading that a fast connection can conceal. section 12.5 section 12.5.1

Figure 12.14 FOUT—Flash of Unstyled Text

Use the figure to compare the initial fallback-font render with the later web-font render that produces the flash and possible layout shift. section 12.5

How CSS in Depth, Second Edition covers it

How deep it goes

Explains fallback and invisible rendering, compares font-display values, and stops short of fully eliminating loading trade-offs.

Examples

Uses fallback-to-web-font rendering, Google Fonts display settings, and throttled DevTools connections as concrete examples.

What it assumes

Assumes familiarity with web fonts and browser rendering while defining FOUT, FOIT, fallback fonts, and font-display behavior.

What you can do after

Diagnose font-loading flashes with throttled connections and choose among font-display strategies according to connection speed and design importance.

How it connects

Connects web fonts, fallback fonts, FOIT, font-display, and browser DevTools network throttling.

liveBookmanning.com

Read CSS in Depth, Second Edition on liveBook Get the book at manning.com

Related concepts

• fallback fontproduced by · A fallback font is an alternative typeface selected when a preferred font is unavailable, cannot be loaded, or has not finished loading.
• foitcontrasts with · FOIT, or Flash of Invisible Text, is the visual effect in which text is rendered invisibly until the intended web font loads.

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.