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

Question

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

score 10 · Answer 1 · answered Apr 17 '19 at 12:11

10

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

answered Apr 17 '19 at 12:11

K. Shaikh

301
4
12

3

While `font-face` can be used for normal fonts, it is not a good idea to use it for icon fonts. In reality, `swap` uses a fallback font to display while waiting for the real font to download, then it just "swaps" to the real font. This said, font awesome doesn't have a fallback, so it will either display a weird character or something else depending on the browser. You can check a really nice answer here - https://stackoverflow.com/questions/49461308/correct-font-display-value-for-icon-fonts You cannot easily bypass this, so be careful when using icon fonts. – Nikolay Jun 08 '20 at 11:24

score 1 · Answer 2 · answered Feb 20 '19 at 21:30

1

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;

answered Feb 20 '19 at 21:30

Rafał Bochniewicz

201
3
5

it's a Lighthouse / Pagespeed issue or it's working the same way into browsers? – Даниил Пронин Mar 15 '19 at 08:22

score 1 · Answer 3 · edited Jan 05 '20 at 10:25

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>

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

3 Answers3

Linked