Considering that 87% of all sites load web fonts, Google PageSpeed Insights’ “Ensure text remains visible during webfont load” is one of the most common warnings.
The good news is that as common as this issue is, it's just as easy to fix.
Read on to learn how.
Why PageSpeed Insights Flagged This Up
Simply put, Lighthouse identifies all the web fonts declared in your CSS and checks to see if a font-display attribute has been specified for each of them.
If not, all font files that don’t leverage the CSS feature are flagged as potential culprits for loading invisible text.
But what does “inivisible text” mean?
What is a flash of invisible text (FOIT)
FOIT occurs when a browser hides text while waiting for a web font to load. Instead of displaying any fallback text, the content remains invisible, leading to a blank screen for a moment.
Flash of invisible text
Why does this happen?
A lot of websites, perhaps yours as well, use third-party fonts to style their texts. This means that when the browser starts rendering your page, it sees that the texts require an additional webfont (e.g., Google Fonts or Adobe Fonts) that needs to be downloaded.
If the font isn’t yet available, the browser pauses text rendering and waits for it to be downloaded, assuming it’s essential for your page’s design.
As you can see from the example above, once the web font is fully downloaded, the browser re-renders the text, causing it to "suddenly appear."
While it may seem like a minor hiccup, the truth is that this delay directly affects performance metrics like First Contentful Paint (FCP), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and overall Core Web Vitals.
On top of that, users perceive a blank page as a slow-loading site and bounce immediately. So, you can expect SEO metrics like bounce and engagement rates also to plummet.
However, it’s essential to understand that the verdict is not to stop using third-party fonts.
The FOIT issue stems from the fact that you are not leveraging the font-display API.
Missing font-display descriptor
As we said at the beginning of this section, the main reason you see the “Ensure text remains visible during webfont load” warning is that you’re loading fonts without the font-display attribute.
The font-display API is a CSS property that controls how web fonts are loaded and displayed by the browser. It determines whether the text should be hidden, visible with a fallback font, or swapped once the web font is ready.
By default, some browsers hide text until the web font loads (causing FOIT), while others show a fallback font first and then swap it with the web font (causing FOUT – Flash of Unstyled Text). The font-display property allows you to override this default behavior and improve performance and user experience using the following attributes:
- font-display: block - Hides text until the font loads (FOIT). If the font takes too long, text may remain invisible for up to 3 seconds.
- font-display: swap - Immediately displays fallback text and swaps in the web font once it's ready
- font-display: fallback - Shows the fallback font immediately but only swaps in the web font if it loads quickly (e.g., within 100ms)
- font-display: optional - Uses the fallback font and only loads the web font if it’s already cached or very fast to download.
And here’s how you can add font-display to your files…
How to Fix The “Ensure Text Remains Visible During WebFont Load” Warning in WordPress
Insert the font-display descriptor manually
1. Google Fonts
By default, WordPress themes and plugins enqueue Google Fonts using a link tag. To resolve the PSI warning, you need to modify the URL to include &display=swap. After the changes, your code will look like this:
To update how your Google Fonts are loading, you have two options:
Option 1: Editing functions.php
- Open your WordPress dashboard.
- Navigate to Appearance >> Theme Editor
- Open the functions.php file
- Find the Google Fonts enqueue function and modify it
- Save the changes
Option 2: Use the built-in theme option
Some of the well-coded themes include a built-in option that allows you to change your font-display properties with a single click:
If your theme allows it, simply select “Swap” from the drop-down menu.
2. Adobe Fonts
Similarly to Google Fonts, you can update your Adobe Fonts by adding font-display to your Adobe Fonts project.
Important: By default, the font-display setting of web font projects is set to auto.
Here’s how to do it:
1. In your web projects page, click Edit Project
Source
2. Select font-display: swap from the sidebar
Source
3. Save the changes
3. Font Awesome
Unlike text fonts, icon fonts like Font Awesome don't have system fallbacks, so using font-display: swap can result in missing icons during the font loading phase.
Therefore, setting font-display: block is recommended to ensure icons are hidden until the font is fully loaded, preventing any display issues. Here’s how to do it:
- Navigate to Appearance > Customize > Additional CSS.
- Add the following CSS:
- Replace the src URLs with the appropriate paths to the Font Awesome font files you're using.
- Save your changes.
Using the font-display: block can actually show an invisible text for a brief period of time. That’s why it’s important to do two things if your website is icon-heavy:
- Consider preloading your Font Awesome font files by adding a link rel="preload" tag in your theme's head section:
- Only load the specific icons you need to reduce the font file size and improve loading times.
Fix font-display issues automatically with NitroPack
Inserting code manually poses a risk of breaking your site, especially if you lack technical expertise and an in-house dev team.
The good news is that you don’t have to do things manually.
NitroPack is an all-in-one solution that automatically applies more than 60 advanced web performance optimizations. One of which is “Ovveride font rendering behavior”:
This feature allows you to specify the font-display property for all your fonts. Simply put, you can fix the “Ensure text remains visible during webfont load” in three clicks.
On top of that, with NitroPack, you will have access to two more font optimization features that will resolve your preload and subsetting issues automatically:
- Font loading strategy аutomatically adds a preload link in the head section, thus instructing the browser to fetch the font resources as soon as possible. This ensures fonts start loading early in the page lifecycle, reducing the chances of the "flash of invisible text" (FOIT) or "flash of unstyled text" (FOUT).
- Font subsetting is an especially useful feature for icon-heavy websites as it removes any unused glyphs from your font files, thus reducing their size and improving the load time of your web page.
Benefits of Optimizing Your Fonts
Beyond the fact that you will have one PSI warning less to worry about, optimizing your fonts across the board will have some additional benefits to your site’s overall performance:
1. Improved FCP and LCP scores
FCP measures the time it takes for the first visible content—such as text, images, or canvas elements—to appear on the screen.
On the other hand, LCP focuses on how long it takes for the largest, most prominent content (like a hero image or headline) to become visible.
When it comes to your FCP score, the key lies in minimizing delays caused by web font loading. By optimizing your font files, you can guarantee that the browser will be able to render your content as fast as possible, giving immediate feedback to your visitors that something is happening.
Font optimization also plays a crucial role in LCP, particularly when fonts are applied to large text elements like headings or hero text. By applying the techniques in this article, you can guarantee that your largest above-the-fold element will meet Google’s standards and load within 2.5 s.
2. Better CLS score
CLS measures how often visible elements unexpectedly shift on a webpage while it's loading. A low CLS score indicates a stable, consistent layout, which is essential for delivering a smooth user experience and improving search engine rankings.
Optimizing your fonts using font-display: swap combined with preloading can significantly enhance your CLS score. When fonts aren’t optimized, browsers may initially display fallback fonts and then shift the layout when the web fonts load—a common cause of high CLS.
By applying font-display: swap, you ensure text appears immediately with a fallback font while the web font loads in the background. Preloading your fonts with link rel="preload" ensures these fonts are prioritized during the loading process, reducing the delay between the initial text render and the font swap. Together, these optimizations minimize layout shifts, creating a more stable, user-friendly experience and a better CLS score.
Bonus Tip: Choose fallback fonts that closely match the dimensions of your web fonts
If the fallback and web fonts have similar x-height, width, and line spacing, the layout shift will be less noticeable or eliminated entirely
3. Higher engagement rates
When visitors encounter a fast, visually stable, responsive website, they stay longer, engage more, and are more likely to convert—whether that's making a purchase, subscribing to a newsletter, or exploring more content.
Font optimization is a simple yet powerful step toward improving site performance and creating an experience that feels seamless and effortless for your users.
FAQs
Is it possible to apply font-display settings to fonts loaded by plugins?
Yes, but it depends on the plugin. Some plugins allow custom CSS modifications, while others may need more advanced configurations. Tools like NitroPack can automatically apply font optimization settings across all fonts, including those loaded by plugins.
Does font optimization affect mobile performance differently than desktop?
Yes, mobile devices typically have slower network connections, so font optimization is even more critical for mobile performance. Applying font-display: swap and preloading can significantly improve mobile FCP, LCP, and CLS scores.
Does using font-display: swap negatively impact design consistency?
It can if the fallback font differs significantly from the web font. To maintain consistency and avoid CLS issues, choose a fallback font with a similar x-height, weight, and spacing to your primary web font.
How do I know which fonts to preload for better performance?
Focus on fonts used in above-the-fold content, such as headlines and navigation menus. Tools like Chrome DevTools and GTmetrix can help identify these critical fonts.
