Ensure text remains visible during web font load

How to ensure text remains visible during web font load?

How to ensure text remains visible during web font load?

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?

When a user visits a website all the major Web Browsers hide the text on the page until the font-files are fully downloaded. Font-files can be large and often take a long time to load. This leads to the visitor visiting your website wait longer to see any text content on the page. This affects the user experience.
An alternative to this experience is to show the web page text in the device’s default fonts while the font-files are being downloaded. Once downloaded, the font for the displayed text is changed. This helps the user to get engaged with the page content a lot earlier.

How ensure text remains visible during web font load suggestion looks like?

Ensure text remains visible during web font load
As you can see while taking PageSpeed Insight tests, it suggested the above web font load suggestions. In your case, it may be more or less but it will look just like this.

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.

I hope this example has solved your issue. I have also written another article related to PageSpeed Insights suggestion fix for preload key requests. You also read about Web font loader from here.
Additionally if you don’t wanna go in the hassle of changing the CSS style by yourself for multiple web font loads then you can also try this useful plugin called Asset Cleanup. It has a option to add font-display: swap without touching the plugins at all.
asset-clean-up-font-display
It has many other useful features which you wont find in any other plugins. I will discuss about all the features in another article soon. It has a Pro Feature as well. If you like this plugin then support the developer by buying the pro version.
Ensure text remains visible during web font load
Stay Connected
Related Stories
Author Stories
Swarna The Sagi Girl Weekly Newsletter
Subscribe to our Newsletter

Stay up to date with our latest news and product reviews

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments