How to Prevent the "text remains visible during Webfont load"

Hey There,

First of all, I'm writing my thoughts about how do I solved the issue which is occurred while testing the web perforation chrome #Lighthouse.

Most of the website I've used google fonts but few clients required custom fonts that are not available on Google Fonts. So I decided to use the custom font but Fonts are often large files that take a while to load. Some browsers hide text until the font loads, causing a flash of invisible text (FOIT).

Why Lighthouse throws an error in custom font-display "which is very bad!"

The Above image you shows the issue with Custom font "BrutalType"

Then How to solve this issue invisible text while loading font?

The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including

font-display: swap

in your @font-face style, you can avoid FOIT in most modern browsers:

@font-face {
  font-family : BrutalType;
  src         : url('./assets/fonts/BrutalType-Light.otf') format('opentype');
  font-style  : normal;
  font-display: swap;
}

In case if you are using google fonts kindly use the &display=swap to the end of your Google Fonts URL like:

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

!! Warning!

display=swap only supports modern browsers!!

ThankYou for Reading! if you like this quick tips please like and comment on your thoughts

Happy Codding 👨🏻‍💻