Foit

As explained in CSS in Depth, Second Edition

FOIT, or Flash of Invisible Text, is the visual effect in which text is rendered invisibly until the intended web font loads.

FOIT, or Flash of Invisible Text, occurs when the browser hides text until the intended web font loads. Layout, backgrounds, and borders appear, but text remains invisible during the initial render. section 12.5

FOIT preserves space and prevents the layout shift associated with immediately showing a fallback font, but it can leave users with a useless shell if the web font loads slowly or fails. section 12.5

Use font-display to choose how the browser balances invisible text, fallback text, and font fidelity:

• `block` produces a short FOIT, then falls back to unstyled text if necessary. section 12.5.1
• `swap` shows the fallback font immediately and replaces it when the web font becomes available, producing FOUT. section 12.5.1
• `fallback` briefly hides text, then uses the fallback font and later replaces it when possible. section 12.5.1
• `optional` may keep the fallback font when loading takes too long, making it suitable when the web font is less important. section 12.5.1

Testing font-loading behavior

Throttle the network in Chrome or Firefox DevTools, select Regular 3G, and disable the cache. Reloading then exposes the delay and makes FOIT or FOUT behavior easier to evaluate. section 12.5

Figure 12.15 FOIT—Flash of Invisible Text

Compare the visible page shell with invisible text during FOIT. section 12.5

How CSS in Depth, Second Edition covers it

How deep it goes

Explains FOIT’s rendering behavior, drawbacks, alternatives, font-display values, and network-throttling tests without covering font-loading internals.

Examples

Uses Figure 12.15, font-display values, Google Fonts display settings, and throttled Regular 3G reloads as concrete examples.

What it assumes

Assumes familiarity with web fonts and CSS while explaining FOIT, FOUT, fallback fonts, and font-display behavior directly.

What you can do after

Operate/configure web-font loading with font-display and diagnose FOIT or FOUT using throttled browser network conditions.

How it connects

Connects FOIT with web fonts, fallback fonts, FOUT, @font-face, font-display, layout shift, and network throttling.

liveBookmanning.com

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

Related concepts

• block-level elementproduced by · A block-level element is an HTML element that participates in block layout, normally starts on a new line, and generally occupies its container’s available width.
• foutcontrasts with · FOUT, or Flash of Unstyled Text, is the transient display of text in a fallback font or without intended styling before the intended web font or styling 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.