18

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

leo Spacer
  • 201
  • 1
  • 2
  • 4
  • did it resolve if you checked you website again? i have noticed that `font-display` property effects are not picked up by Google Lighthouse and Google PageSpeed – Akber Iqbal May 20 '19 at 09:15

3 Answers3

21

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/

Machavity
  • 30,841
  • 27
  • 92
  • 100
Abhilash
  • 211
  • 2
  • 4
6

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">
Shoaib Khalil
  • 1,874
  • 17
  • 10
1

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

Hans Ganteng
  • 179
  • 1
  • 4