methodology / Performance / #36

Font loading strategy (FOUT/FOIT/swap)

live factor #36 · Performance · scoring impl: implemented · weight 0.7%

What we measure

Custom fonts can either delay your page rendering (FOIT — flash of invisible text) or flash unstyled text (FOUT). `font-display: swap` shows fallback text immediately, then swaps in the custom font when it loads.

How to improve your score

Add `font-display: swap` to your `@font-face` rules, or ensure your font loader (Google Fonts, Adobe Fonts, @fontsource) uses it by default.

Data source

Data source for this factor is not yet documented.

Implementation notes

Parse stylesheets for `font-display` declarations and report the value.

Scoring

Scoring formulas are versioned with the methodology. The current method (v1.1.0) maps raw measurements to pass, warn, fail. Factor weights determine how much each contributes to the composite — see the methodology index for the full table.

Version history

← back to methodology