Use code PERFMATTERS for an extra 10% off!
  1. Home
  2. Docs
  3. Tips
  4. How to fix the “Ensure text remains visible during webfont load” warning

How to fix the “Ensure text remains visible during webfont load” warning

Google requires that your text (web fonts, font icons, etc.) always remain visible as your WordPress site loads. This impacts both First Contentful Paint (FCP) and Largest Contentful Paint (LCP), as well as the user experience. If your text flashes or takes a while to load, you’ll see the warning in Google PageSpeed Insights to “ensure text remains visible during webfont load.”

Ensure text remains visible during webfont load
Ensure text remains visible during webfont load

There are different ways you can fix this warning, and it will vary based on whether you’re dealing with a web font, an icon, and the theme/plugin you’re using. Below we’ll dive into a few common scenarios we see.

Google Fonts

The easiest way to resolve the “ensure text remains visible during webfont load” warning with Google Fonts is to include the font-display property “swap” in your @font-face style. Your fonts will temporarily default back to system fonts until your Google Fonts have finished loading. This fixes the warning and is supported in all modern browsers.

If you’re adding Google Fonts manually (from fonts.google.com), the font-display property is already included in the code. Example: 

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet">

However, your theme often adds Google Fonts, and they might not always include the font-display property. In this case, the easiest way to fix this is to use our Local Google Fonts feature in Perfmatters. We’ll automatically host your theme’s Google Fonts locally, which is better for performance privacy. You can then enable the display swap feature.

Display swap with Perfmatters
Display swap with Perfmatters

Some well-coded themes like GeneratePress also have an option to change the property for font-display. However, we still recommend hosting your Google Fonts locally for performance and privacy reasons.

Google font-display option in GeneratePress
Google font-display option in GeneratePress

Adobe Fonts (Typekit)

Adobe Fonts is very similar to Google Fonts. You can add the font-display property “swap” to fix the warning. Simply enable this in your Adobe Fonts project.

Typekit ensure text remains visible warning
Typekit ensure text remains visible warning

Font Awesome

With Google Fonts and Adobe Fonts, it’s pretty easy to fix the “ensure text remains visible during webfont load” warning. You simply add the font-display property “swap” and they default back to system fonts temporarily until the other fonts have finished loading. However, with Font Awesome, there is nothing to fall back to. There are no such things as system icons. 

For Font Awesome, you need to set the font-display property to “block” instead of “swap.” Font Awesome versions 5.15 and higher now have this added automatically (#16077). You can see it in their stylesheet

However, many themes and plugins are still using older versions. In this case, we recommend contacting the developer and asking them to update the Font Awesome library version. Once they do that, the warning will automatically be fixed.

Some themes also have an option to change the font-display property in their options. So make sure to check your theme settings. If you’re using Elementor, skip down to the eicons fix

Woodmart font-display for icon fonts
Woodmart font-display for icon fonts

Also, when it comes to Font Awesome, ensure you’re only loading the icons you need (if possible). This will ensure faster load times.

Custom font icons

When using custom icons in WordPress, we always recommend SVGs wherever possible. They are lightweight, fast to load, and won’t cause any warnings in Google PageSpeed Insights. For example, GenerateBlocks lets you add any Font Awesome icon you want as an SVG. It’s very powerful and the way to go regarding performance.

SVG icon in GenerateBlocks
SVG icon in GenerateBlocks

Elementor icons (eicons and Font Awesome)

Some page builders and theme include their own custom font icon libraries, such as eicons with Elementor. However, they don’t also inline their code, meaning they might generate the “ensure text remains visible during font load” warning. 

However, you can fix this in Elementor using their experimental option. Follow the steps below. 

Step 1

Click into Elementor “Settings” and then on the “Experiments” tab.

Elementor Experiments
Elementor Experiments

Step 2

Scroll down and activate “Inline Font Icons.” This will render the icons as inline SVGs without loading the eicons libraries. This applies to both their eicon and Font Awesome libraries.

Elementor Inline Font Icons
Elementor Inline Font Icons

The above feature is experimental, so we highly recommend clicking around your WordPress site to ensure everything looks OK with your font icons.

Custom fonts

If you’re using your own custom fonts, you might be able to add the font-display property “swap” to your stylesheet manually. If not, we recommend reaching out to your theme or page builder developers and ask how to add “swap” to your fonts. Most have filters or documentation on how to do this.

Elementor

If you’re using Elementor’s custom fonts, you can add their font_display filter. Make sure to go to “Tools” and “Regenerate CSS & Data” in Elementor after adding the filter.

add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
	return 'swap';
}, 10, 3 );
Was this article helpful?

Related Articles