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

Website Speed and Performance Optimizations

Test Your Local Developing Laravel Web Application From Phone Browser Without Any Software

Client-Side DataTable, Adding Super Powers To HTML Table

Plain PHP Resumable Large File Uploads In Chunks Using FlowJs

Redirect www to a non-www Website Or Vice Versa

Make Laravel Controllers Slim By Skimming Form Validation Request

Create Gmail App Password For SMTP Mails

Multiple GIT Key Pairs Or Account In The Same Computer

Securely Connect Server MYSQL DB From Sequel Pro / MYSQL Workbench

Writing Clean Code In PHP

Detect AdBlocker With Javascript And Increase Website Ads Revenue

Basic Server Security Setup For Ubuntu / Linux

Client-Side Form Validation With Javascript

Laravel App Deployment Checks

Supervisor For Laravel Queue Scheduling