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

google-pagespeed
Hiran Narayanan picture Hiran Narayanan · Jan 20, 2019 · Viewed 10.7k times · Source

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;
}

Answer

K. Shaikh picture K. Shaikh · Apr 17, 2019

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);
}

Related questions

CSS delivery optimization: How to defer css loading?

I am trying to optimize the CSS delivery following the google documentation for developers https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example As you can see in the example of inlining a small CSS file the critical CSS in …

Read More
How does Google's Page Speed lossless image compression work?

When you run Google's PageSpeed plugin for Firebug/Firefox on a website it will suggest cases where an image can be losslessly compressed, and provide a link to download this smaller image. For example: Losslessly compressing http://farm3.static.flickr.…

Read More
What is "above-the-fold content" in Google Pagespeed?

Until recently, my site (www.heatexchangers.ca) scored 98% on Google Page Speed. There were a couple of things I could do nothing about such as the query string from web fonts. I was very happy with this as this represented …

Read More