Are you using Google’s PageSpeed Insights? Are you getting the suggestion “Ensure text remains visible during web font load”? Then my friend, today we are going to discuss this very topic and show you how to fix this issue easily.
What is ensure text remains visible during web font load suggestion?
How ensure text remains visible during web font load suggestion looks like?
In my case there are three fonts that needs improvement. It’s showing the total Potential savings as 440 ms. For example purpose, I will be showing you how I fixed the first font fa-brands-400.woff2 suggestion.
How to fix ensure text remains visible during web font load?
The only way to evade showing invisible text while the font loads is to temporarily show a system font. By incorporating font-display: swap in your @font-face style, you can avoid Flash of invisible text (FOIT) while your web font is loading in the browser.
@font-face{
font-family:"Font Awesome 5 Brands";
font-style:normal;
font-weight:normal;
font-display:swap;
src:url(../webfonts/fa-brands-400.eot);
src:url(../webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.woff) format("woff"),url(../webfonts/fa-brands-400.ttf) format("truetype"),url(../webfonts/fa-brands-400.svg#fontawesome) format("svg")
}
As you can see in the above code I have added the line font-display: swap;. You have to similarly add this line in your suggested fonts css files.
I have added the font-display: swap in the Elementor plugin css file. Once added I refreshed the PageSpeed Insights and Bam! It’s gone. And I have achieved it’s corressponding saving time of 180 ms. Similarly, you can improve your website web font load time. Once you do this for all the fonts there will be no “ensure text remains visible during web font load” suggestion for these fonts.
