CODEWITHSUNDEEP
google-pagespeed
Hiran Narayanan
Hiran Narayanan

Reputation: 141

Ensure text remains visible during webfont load not getting resolved in Google pagespeed insights

Ensure text remains visible during webfont load issue is not getting resolved in google pagespeed insights report even after adding font-display: fallback to the CSS.

How can I resolve the issue?

@font-face {
  font-family: Jura;
  src: url(../fonts/Jura-Regular.eot);
  src: url(../fonts/Jura-Regular.eot?#iefix) format('embedded-opentype'), url(../fonts/Jura-Regular.woff2) format('woff2'), url(../fonts/Jura-Regular.woff) format('woff'), url(../fonts/Jura-Regular.ttf) format('truetype'), url(../fonts/Jura-Regular.svg#svgFontName) format('svg');
  font-weight: 400;
  font-display: fallback;
}

Upvotes: 10

Views: 17116

Answers (3)

Sagar Pansuriya
Sagar Pansuriya

Reputation: 76

This issue can be solved by adding an online JS library of the font-awesome between head tag on website.

https://fontawesome.com/how-to-use/with-the-api/setup/configuration#configuration

<html>
    <head>
        <script>
            FontAwesomeConfig = {searchPseudoElements: true}
        </script>
        <script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
   </head>
   <body></body>
</html>

Upvotes: 1

K Shaikh
K Shaikh

Reputation: 401

I got rid of it by adding font-display: swap;

@font-face{
    font-family:FontAwesome;
    font-display: swap;
    src:url(fonts/fontawesome-webfont.eot?v=4.5.0);
}

Upvotes: 10

Rafał Bochniewicz
Rafał Bochniewicz

Reputation: 211

I solved this problem by adding the @fontface rule directly between tags in index.html. You can also try setting the font-display at the top of the @fontface rule.

font-display: fallback;
font-family: 'Montserrat';
src: local('Montserrat'), url('https://fonts.googleapis.com  /css?family=Montserrat:300,700') format('woff2');
font-style: normal;
font-weight: 700;

Upvotes: 1

Related Questions