Use code PERFMATTERS for an extra 10% off!

How to add font-display:swap to your Google Fonts

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.

Ensure text remains visible during webfont load warning in Lighthouse
Ensure text remains visible during webfont load warning in Lighthouse

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.

Step 1

Click into the Perfmatters plugin settings.

Perfmatters plugin settings

Step 2

Under the “Options” tab, click on the “Fonts” sub-navigation menu.

Perfmatters fonts
Perfmatters fonts

Step 3

Toggle on “Display Swap.” This will append display=swap to the end of your Google Fonts stylesheet in your HTML.

Font-display:swap option in Perfmatters
Font-display:swap option in Perfmatters

Example before

//fonts.googleapis.com/css?family=Poppins:300,regular,700

Example after

//fonts.googleapis.com/css?family=Poppins:300,regular,700&display=swap

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.

Step 5

Scroll down and click “Save Changes.”

Was this article helpful?

Related Articles