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.
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>
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; }
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!
Are you looking for someone to increase your page speed? Just fill in the form and get started!
"*" indicates required fields
Automated page speed optimizations for fast site performance