Ensure text remains visible during webfont load

Upon testing your website on PageSpeed Insights by google, you must have found the issue “Ensure text remains visible during webfont load” in the diagnostics section and upon clicking it will show up the complete URLs of your .woff files or the (Web Open Font Format) font files something like this :

As you can see if we fix these issues, it has a potential of saving few milliseconds of page loading. In the above image you can see the website which has been tested using the PageSpeed Insights uses both local font as well as Google Web Fonts which has been embedded into the website.

So now lets fix the issue.

Fixing Embeded Google Fonts

If you are using Google fonts which has been embedded into the website using standard or @import like the following then you can simply add “&display=swap” at the end to fix the issue.

STANDARD

<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">

@IMPORT

<style>
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');
 </style> 

Fixing Local Web Fonts

If you are using @font-face and the fonts files are located in your server then you can use the following.

@font-face {
  font-family: "Open Sans Regular";
  font-weight: 400;
  font-style: normal;
  src: url("fonts/OpenSans-Regular.woff2") format("woff2");
  font-display: swap;
}

What exactly the font-display does?

font-display is a CSS property which is available in most of the latest updated browsers. font-display is used inside of a @font-face. When we set the font-display:swap, upon initial page load the system default fonts are swapped unless the custom fonts or google fonts are loaded. This helps user to read the content immediately.

If you need any assistance in fixing the issue or want to optimize your website speed then feel free to contact us. We will definitely fix the issue within hours!