Good content takes time and effort to come up with.

Please consider supporting us by just disabling your AD BLOCKER and reloading this page again.







Ensure text remains visible during Webfont load


Share On     Share On WhatsApp     Share On LinkedIn


Sometimes loading static files take long time to load. Especially CSS, Images, Webfont (Fonts). The best way to tackle them is to CACHE them in users devices. If your new to CACHE concepts and wondering how the hell should I do it. Then I have already written an article for it How To Cache Static Files With NGINX Server. Please have a look at it and I promise that you wont regret about about that :)


Even after caching fonts sometimes when you run an audit in Google Lighthouse, you will basically encounter Ensure text remains visible during Webfont load. Which looks as the below image


Google Light House Audit - Text Remains Visible

Google Light House Audit - Text Remains Visible


This is because some browsers wait for the fonts to get loaded and don't show texts in the browser until they load the webfont. You might have imported the font-family as below.


@font-face { 
    font-family: inter; 
    src: url('../fonts/Inter-Regular.otf'); 
}


One simple way to tell browsers to show the default one text and don't wait for fonts to load is add the following code.


font-display: swap;


Now your overall CSS will look like the following


@font-face { 
    font-family: inter; 
    src: url('../fonts/Inter-Regular.otf'); 
    font-display: swap;
}


Hope it helped you. Happy coding :)






Author Image
AUTHOR

Channaveer Hakari

I am a full-stack developer working at WifiDabba India Pvt Ltd. I started this blog so that I can share my knowledge and enhance my skills with constant learning.

Never stop learning. If you stop learning, you stop growing