CODEWITHSUNDEEP
csswebfontsgoogle-pagespeedgoogle-fonts
leo Spacer
leo Spacer

Reputation: 201

How to fix Ensure text remains visible during webfont load

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

Upvotes: 18

Views: 36091

Answers (3)

Shoaib Khalil
Shoaib Khalil

Reputation: 2430

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">

Upvotes: 9

Hans Ganteng
Hans Ganteng

Reputation: 189

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

Upvotes: 1

Abhilash
Abhilash

Reputation: 211

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/

Upvotes: 21

Related Questions