Font Swap PageSpeed Insights Workaround

Recently, I used various inspection sites to find out what kind of problems there are for WordPress optimization, and among them, I found a Font Swap error during the PageSpeed Insight inspection process.

“Checking to see if the text continues to appear while the webfont is loading,” which is why we’ve referred to various documents, which basically means that Explorer uses the FOUT method, but other browsers use the FOIT method, so you can change it to the FOUT method.

To give you an additional explanation, the FOUT method shows text regardless of whether the web font is loaded or not, but the FOIT method becomes invisible if the web font is not loaded. That’s why when your site loads, you should change the way text is displayed without waiting for web font loading.

When I first constructed WordPress, I knew this error and tried to modify it by referring to various foreign documents, but at that time, it was difficult to correct it because I was a beginner.

However, now that I’ve been able to get to know some of the various errors, I’ve been able to deal with this part without difficulty recently. It might not be difficult for those who know, but for those who are having a hard time like me, I’ll introduce some solutions to the Font Swap.

font swap

1. Utilize plug-ins

In the past, I found and installed a plug-in to solve this problem, but at that time, I deleted it because the plug-in didn’t work properly, but I recommended it the most when I looked at foreign posts.

So with the plug-in that I’m recommending, I’ll introduce the plug-in that I recently got to know.

1-1. Replace Google Font Display

font swap

First, if you search for errors in a foreign country, this is the most recommended Swap Google Fonts Display plug-in. It is safe to use because it has been updated until recently and there is compatible work.

Incompatible plug-ins can have a bad effect on the site, so please check this part when installing plug-ins.

If you install the plug-in above, it automatically processes Font Swap, so you don’t need to set it up.

1-2. Asset Cleanup

font swap

Among WordPress optimization plug-ins, Asset CleanUp has a variety of functions, including the ability to change the web font display setting to Swap.

font swap

When you install the plug-in and view the settings, there is a Google Font setting, where you can apply the Apply font-display : Css property value setting above.

If you use the optimization function of the plug-in, I can recommend you to install it, but if you use it only for fault resolution of the font swap, please do it in the last way without any recommendation.

This is because reducing the use of plug-ins as much as possible is good for site optimization.

2. Modify Font Swap CSS

font swap

The most recommended method is to modify the CSS directly because reducing the use of the plug-in as much as possible is good for site optimization. In WordPress Manager, go to Theme Design > Theme Editor.

font swap

Go into the theme editor, find @font-face in your theme CSS, and add it as you can see above.  The Font Swap setting is an option that works the same as FOUT.

But it may be difficult to find the part because it depends on the theme, but if you type the name of the theme used by Google and search for the @font-face part, you will be able to find the location of the foreign users’ posts.

It’s good to be able to solve it with plug-in, but it’s good to reduce plug-in as much as possible, so I recommend that you fix errors on inspection sites such as PageSpeed Insight without plug-in.

▶ Free SEO plug-in for Rank Math

▶ WordPress Plug-in to show related articles

▶ Plug-in with wordpress sharing auto-publishing

Leave a Comment

Your email address will not be published.

Scroll to Top