How To Ensure Text Remains Visible During Webfont Load In WordPress

If you ran your website through PageSpeed Insights, you may see a recommendation to ensure text remains visible during webfont load.

This is caused by FOIT (flash of invisible text) and happens when the browser waits for a font to download. A simple edit in your font’s CSS (or a plugin) can fix FOIT by using font-display: swap.

By applying font-display: swap, you’re telling the browser to use the fallback font until the custom font is ready (to prevent invisible text), then to “swap” to the fallback font with the custom font. So instead of being invisible, this ensures text remains visible during webfont load.

Ensure text remains visible during webfont load

 

1. What Is FOIT (Flash Of Invisible Text)?

Flash of invisible text happens when the browser hides the text until the font loads.

Fonts can load slowly because of their large file sizes. That’s why you might see the rest of the page download before your fonts, creating a flash of invisible text (shown in the image below).

FOIT - flash of invisible text
FOIT: flash of invisible text  – source: malthemilthers.com

The time your text is invisible is the “blocking period.” During the blocking period, you need to decide which font-display property to use. This determines how browsers will handle the fonts.

Font-Display PropertyActionBlocking Time
AutoBrowser decides how to handle fonts.Browser Decides
BlockForces 3 second block which causes FOIT.Short
SwapUses fallback until custom font is ready (FOUT).None
FallbackFont is invisible at first, loads fallback, then swaps when custom font is ready.Very Short
OptionalFont is invisible at first, loads fallback, then lets browser decide if custom font should load.Very Short

In the @font-face, you can choose between a few font-display options. Some cause more FOIT while others cause FOUT. The trick is to find a balance between the two, which is why “swap” is most often recommended. If you view your font’s CSS, it’s likely using one of the other options.

  • FOIT – hide the text until fonts are ready (no fallback).
  • FOUT – show the fallback font, then swap them when fonts are ready (FOUT).

<center>FOIT - flash of unstyled text</center>

Here is how browsers react:

BrowserAction
ChromeWill hide text for up to 3 seconds. If text is still not ready, uses a system font until font is ready. Swaps out font.
SafariHides text until font is ready.
FirefoxWill hide text for up to 3 seconds. If text is still not ready, uses a system font until font is ready. Swaps out font.
EdgeUses a system font until font is ready. Swaps out font.
Font-display-supported-browsers
Browsers that support font-display – caniuse.com

 

2. How To Fix FOIT

View the problematic font file in your PageSpeed Insights report.

Ensure text remains visible during webfont load

Open the font’s CSS file.

If the font is being injected from a plugin (you should notice this in your PageSpeed Insights report), go to your Plugin Editor, select the plugin that is injecting the font, and view it’s CSS file.

Plugin fonts

If you still can’t find the font file, use the String Locator plugin to search for the font.

String Locator

Add font-display: swap to the font’s CSS. This is different for Google Fonts vs. other fonts.

Google Fonts – add &display=swap to the end of the font’s URL.

Google Fonts Display Swap

Without Font-Display Swap:

https://fonts.googleapis.com/css2?family=Lato:wght@100

With Font-Display Swap:

https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap

Other Fonts – add font-display: swap inside the CSS.

font-display swap

Without Font-Display Swap:

@font-face { font-family: Lato; }

With Font-Display Swap:

@font-face { font-family: Lato; font-display: swap; }

 

3. Plugins That Fix FOIT

Swap Google Fonts Display – this plugin finds all Google Fonts and sets the font-display to swap (just install and activate it). It was developed by Gijo Varghese, author of many speed plugins and admin of the WP Speed Matters Facebook Group. The plugin only works with Google and can’t add font-display: swap to dynamically injected Google Fonts via JavaScript.

Swap Google Fonts Display

OMGF | Host Google Fonts Locally – originally developed to host fonts locally but also lets you set the font-display option to swap. Includes other features like serving fonts from your CDN and only loading .woff2 files, however many features are now only included in the pro version.

Font-display swap option - OMGF

LiteSpeed Cache – if you’re using LiteSpeed Cache, you can find change the @font-face rules under Page Optimization → CSS Settings → Font Display Optimization, then set this to swap.

Font Display Swap - LiteSpeed Cache

Asset CleanUp – add font-display: CSS property value to Google Fonts (Asset CleanUp > Settings > Google Fonts). You can also do this for local fonts, but will need the pro version.

Ensure text remains visible during webfont load - Asset Cleanup

SG Optimizer – web fonts optimization is found in the frontend optimization settings. By enabling this, a preconnect is added to Google Fonts and all other local fonts will be preloaded. When combined with CSS combination, it changes font-display to swap or add it if it’s missing.

SG Optimizer Web Fonts Optimization

 

4. Preload Fonts

Preloading fonts can fix FOIT and layout shifts.

It’s highly recommended that you test preloading fonts which you can do manually or by using plugins like WP Rocket, Pre* Party, Pefmatters, Autoptimize, Asset CleanUp, and SG Optimizer.

<link rel='preload' href='/font.woff2' as='font' crossorigin>

Be careful when preloading too many fonts especially if they’re being preloaded, but not being used in some areas of your website. Too many preload tags can have a negative effect on speed.

 

5. Retest For Font Errors

Run your WordPress site through PageSpeed Insights (or Lighthouse) and make sure all text remains visible during webfont loads.

All text remains visible during webfont loads

See Also:

Cheers,
Tom

About Tom Dupuis

Tom Dupuis 2017Tom Dupuis writes WordPress speed and SEO tutorials out of his apartment in Denver, Colorado. In his spare time, he plays Rocket League and watches murder documentaries. Read his bio to learn 50 random and disturbing things about him.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments