Ensure text remains visible during Webfont load

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

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;
}

Random Articles For You

Free SSL Certificate With Lets Encrypt/Certbot In Linux (Single / Multiple Domains)

Run Raw Queries Securely In Laravel

Global Data In All Laravel Blade Pages

Lazy Load Images In Chrome With This Simple Trick

Accessors And Mutators In PHP Laravel

Use Different PHP Versions In Ubuntu / Linux

Manipulate HTML Using DOMDocument In PHP

Securely SSH Your Server & Push Files With FileZilla

GitHub Login With PHP Laravel Socialite

Route Model Binding In Laravel & Change Default Column id To Another Column

Free SSL Certificate For CPanel

Move Uploaded Files From Local Computer Or Server To Amazon S3 Bucket In PHP

Setup MAMP Virtual Hosts For Local PHP Development

Responsive YouTube Videos

Select2 Dropdown