How to fix Ensure text remains visible during webfont load

Question

Hi I'm facing this problem in google pagespeed I almost get my site speed to 100 the only thing remaining is Ensure text remains visible during webfont load

I'm already using font-display:swap; so why is this not fixing my problem.

here's my external font css

@font-face {
    font-display: swap;
      font-family: 'Miriam Libre';
      font-style: normal;
      font-weight: 400;
      src: local('Miriam Libre Regular'), local('MiriamLibre-Regular'), url(https://fonts.gstatic.com/s/miriamlibre/v5/DdTh798HsHwubBAqfkcBTL_fZ5P7.ttf) format('truetype');
    }
    @font-face {
    font-display: swap;
      font-family: 'Miriam Libre';
      font-style: normal;
      font-weight: 700;
      src: local('Miriam Libre Bold'), local('MiriamLibre-Bold'), url(https://fonts.gstatic.com/s/miriamlibre/v5/DdT-798HsHwubBAqfkcBTL_X3LbrQsq_.ttf) format('truetype');
    }

I generated this css using this commands

npx local-webfont https://fonts.googleapis.com/css?family=Miriam+Libre:400,700 /Users/admin/Documents/projects/font.css fallback

which I got from https://github.com/swissspidy/local-webfont

Solution 1

You are using google fonts. Its better to add &display=swap to fix the issue.

<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:400,700&display=swap" rel="stylesheet">

Check this : https://www.infyways.com/fix-ensure-text-remains-visible-during-webfont-load/

Solution 2

This property

font-display: swap;

saved my life. Full example is as following:

@font-face {
  font-family: 'Pacifico';
  font-display: swap;
}

And if you're using google fonts then use &display=swap at the end of href url, as following:

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

Solution 3

Check your main css file, is there any css code @font-face? If not, add your code above to your main css or other css that used for your html page. You don't need add your code to html page.

Although your code is correct but it won't solve the problem if it is installed on the html page but in the css file still no code font-display:swap;

Edit it on your css, and skip on html page