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

13,546

Solution 1

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

Solution 2

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;

Solution 3

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>

13,546

Author by

Hiran Narayanan

Updated on July 19, 2022

Comments

Hiran Narayanan almost 2 years

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

Даниил Пронин over 5 years

it's a Lighthouse / Pagespeed issue or it's working the same way into browsers?
Nikolay about 4 years

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 - stackoverflow.com/questions/49461308/… You cannot easily bypass this, so be careful when using icon fonts.