By default, Google Fonts are render-blocking and might take a while to load. The problem is that most modern browsers hide the text until the font is fully loaded. This creates a flash of invisible text (FOIT). Lighthouse flags any FOIT issues with the following warning:
Lighthouse was unable to automatically check the `font-display` values for the origin https://domain.com.
Google recommends that you use a property called font-display. In this example, we’re using the “swap” value which defaults back to system fonts temporarily until your Google Fonts have finished loading. This fixes the invisible text problem and is supported in all modern browsers.
How to add font-display:swap using Perfmatters
Perfmatters makes it easy to add
font-display:swap to your Google Fonts. Follow the steps below.
Click into the Perfmatters plugin settings.
Under the “Options” tab, click on the “Fonts” sub-navigation menu.
Toggle on “Display Swap.” This will append
display=swap to the end of your Google Fonts stylesheet in your HTML.
Step 4 (optional, but recommended)
We also recommend hosting your Google Fonts locally. You can toggle on “Local Google Fonts” in Perfmatters. When “Display Swap” is also toggled on, your new local stylesheet will get
font-display: swap; added to it.
Scroll down and click “Save Changes.”