“Ensure Text Remains Visible During Webfont Load” in WordPress — Fixed

The PageSpeed Insights warning “Ensure text remains visible during webfont load” sounds technical, but the underlying problem is simple and visible: for a moment while your page loads, your text disappears. This guide explains why that happens and how to fix it in WordPress — usually with a single CSS property.

What the warning means

When a page uses a custom web font, the browser has to download the font file before it can show text in that font. The question is what to display during that download. By default, many browsers choose to hide the text entirely until the font arrives — a behaviour known as the “flash of invisible text,” or FOIT. Your visitor stares at a blank space where your headline should be. PageSpeed flags this because invisible text is bad for both user experience and perceived speed.

The fix: font-display: swap

The solution is a CSS descriptor called font-display, added to your font’s @font-face rule. Setting it to swap tells the browser: show the text immediately in a fallback system font, then swap in the web font once it has loaded. Text is never invisible — at worst it briefly appears in a backup font. A font definition with the fix looks like this:

@font-face {
  font-family: "Your Font";
  src: url("/fonts/yourfont.woff2") format("woff2");
  font-display: swap;
}

That one line — font-display: swap; — clears the warning for most sites.

Where the problem comes from in WordPress

The fonts triggering this warning usually come from one of three places:

• Google Fonts loaded by your theme or a plugin, sometimes without swap applied.
• Theme and page-builder fonts defined in CSS you do not directly control.
• Icon fonts (like Font Awesome) and custom uploaded fonts in your theme’s @font-face rules.

Because these definitions live inside themes and plugins, editing them by hand means modifying files you do not own — which a plugin update will overwrite.

How to apply the fix in WordPress

You have three practical options:

1. Use a font-optimisation plugin. The cleanest route. Easy Optimizer‘s font handling applies font-display: swap across your fonts automatically, so text stays visible without touching theme files. This also pairs well with self-hosting your fonts for privacy and speed.
2. Add swap to Google Fonts manually. If you control the font URL, appending &display=swap to a Google Fonts request forces the behaviour.
3. Edit your own @font-face rules. For fonts you defined yourself in a child theme, add font-display: swap; directly to each rule.

Watch the layout-shift trade-off

There is one thing to be aware of: when the fallback font swaps to your web font, the text can change size slightly and nudge the layout — a small Cumulative Layout Shift. You can minimise this by choosing a fallback font with similar metrics, or by preloading your main web font so the swap happens early. For most sites the visible-text benefit far outweighs the tiny shift, but it is worth checking your CLS after applying swap. Both metrics are part of Core Web Vitals, so the goal is to keep text visible and stable.