What Is It?

Fonts are often large files that take awhile to load. Some browsers hide text until the font loads, causing a flash of invisible text (FOIT). FOIT is pretty much how it sounds, when the browser sees that a custom font is applied to a text, it waits till the font is downloaded. Until that time text will be invisible. Once the download is complete, the custom font is immediately applied.

Why Does It Display?

Lighthouse flags any font URLs that may flash invisible text:

You can use the listed files to point you in the right direction of fonts that you should probably address to make your page load faster and look better.

How Do You Fix It?

The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including font-display: swap in your @font-face style, you can avoid FOIT in most modern browsers:

Specifying “Swap” tells the browser that text using this font should be displayed immediately using a system font. Once the custom font is ready, the system font is swapped out. Font Display is an API that is not supported on every single browser, so another solution might be better. 

This solution requires a bit of JavaScript:

• Don't use a custom font on initial page load. This ensures that the browser displays text immediately using a system font.
• Detect when your custom font is loaded. This can be accomplished with a couple lines of JavaScript code, thanks to the FontFaceObserver library.
• Update page styling to use the custom font.

On WordPress, the solution that you use truly depends on what your website is, and how you have added your custom fonts to it. 

For example, if you are using font face, adding the font display: swap; is probably the easiest solution and will apply to 90% of your visitors. 

You're using Google fonts, you can add the following parameter to the URL that you use in either your <link> or @import line: &display=swap

Looking for a simple, automatic, and lightweight way of appending the  &display=swap to Google fonts, there's a plugin for that called Swap Google Fonts Display. It will find all Google Fonts in a webpage and set its font-display to swap.

If you've installed your custom fonts through a pagebuilder plugin for WordPress, like Elementor, there may be a code snippet that you can add to your functions.php file to append “swap” to each of the fonts. For example, in Elementor you can modify the font-display value to block,swap,fallback,optional via a filter:

add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {

return 'swap';

}, 10, 3 );

You can install this snippet by adding it to functions.php, or using a nifty plug-in called Code Snippets. Code Snippets is an easy, free, clean and simple way to run PHP code snippets on your site. It removes the need to add custom snippets to your theme’s functions.php file.

If your font is not from Google or Typekit, dynamically (via JS) injected, called by a plugin or installed via font-face, it gets a bit trickier. You'll need to go in and individually edit every plugin and theme that causes the audit to fail. Luckily, the page speed report will identify which fonts are causing the audit to fail, so all you need to do is identify what plugin is calling the font, and fix it.

Go to your Plugins -> Plugin Editor (or Theme Editor) and select the plugin that is injecting the font. Then find the css file that has @font-face code inside and add font-display: swap inside it. You can use a plugin called String Locator to find all instances of “font-face” in your plugin files.

Typically this fix is required for font-awesome or icons fonts included in plugins, which we've found to be the sole cause of many websites failing this audit.

If you're specifying a custom font inline, then you can use the following syntax to display system font before the custom font loads:

p {

  font-family: “CustomFont”, sans-serif;

}

If CustomFont is not loaded, the browser displays it's default Sans-Serif font until (/if) CustomFont loads.