Ensure Text Stays Visible During Webfont Load (font-display): How to Fix It

What this means

When a browser meets text styled with a custom web font, it has a choice to make while that font file is still downloading: show the text in a backup system font right away, or hide the text until the brand font is ready. By default many browsers pick the second option. The result is a "flash of invisible text," known as FOIT, where readers see empty space where headings and copy should be.

The font-display CSS descriptor controls that decision. It runs on a short timeline of a block period (text can be invisible) and a swap period (a fallback shows and is later replaced). The value you choose decides how long, if at all, visitors stare at nothing.

Why it matters

Invisible text is content your visitor cannot read. On a slow connection the blank period can last several seconds, which feels broken and pushes people to leave before your page is usable. It also touches your Core Web Vitals: the heading or paragraph that holds your largest text block often is your Largest Contentful Paint element, so hiding it delays Largest Contentful Paint (LCP) and drags down the score search engines see.

There is a tradeoff to respect. Showing a fallback font first and swapping later can nudge your layout when the two fonts are different widths, which feeds Cumulative Layout Shift (CLS). The fix below keeps both metrics healthy at once.

How it gets flagged

Lighthouse runs an audit called "Ensure text remains visible during webfont load." It scans the font files your page requests and fails any that could trigger FOIT, meaning the font is loaded without a font-display value that keeps text visible. SEO ProCheck surfaces the same finding and lists each offending font URL so you know exactly which declarations to update. The audit is purely a lab check on your CSS; it does not measure how long the real download took. For that real-world picture, compare against field versus lab data.

How to fix it

Add a font-display value to every @font-face block. Use swap for body copy and headings you always want readable, and optional for fonts you would rather skip than have cause a late shift.

@font-face{ 
  font-family: "BrandSans";
  src: url("/fonts/brandsans.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
 }

Preload the fonts that matter most so the swap window is short and the upgrade is barely noticeable. Place this in the document head:

<link rel="preload" href="/fonts/brandsans.woff2"
      as="font" type="font/woff2" crossorigin>

Self-host where you can. Serving fonts from your own domain removes an extra connection to a third party and gives you full control over the font-display value, caching, and preloading. If you use a hosted service, request the display behavior in the URL, for example by adding &display=swap.

Tame the swap-versus-shift tradeoff with size-adjust. When the fallback and brand font have different proportions, the swap moves your text and harms CLS. Define a tuned fallback so the two fonts occupy nearly the same space:

@font-face{ font-display:swap;
  font-family: "BrandSans-fallback";
  src: local("Arial");
  size-adjust: 97%;
  ascent-override: 95%;
  descent-override: 22%;
 }

body {
  font-family: "BrandSans", "BrandSans-fallback", sans-serif;
}

With the descriptors matched, you keep font-display: swap for instant readable text while the layout barely moves, so LCP and CLS both stay green. As a quick win, choose optional for fonts whose exact look is not critical; the browser uses the brand font only if it arrives almost immediately, otherwise it sticks with the fallback and never shifts.

False positives

A few flags are not real problems. Fonts served by third-party widgets, chat tools, or ad scripts load from CSS you do not own, so you cannot add a display value to them. Icon fonts that render decorative glyphs carry little risk even when flagged. And a font already cached from an earlier visit causes no real FOIT even though the lab audit still reports the missing value. Fix what you control first, then judge the rest by whether real visitors ever see blank text.

FAQ