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

回答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/

回答2:

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

来源：https://stackoverflow.com/questions/55438023/how-to-fix-ensure-text-remains-visible-during-webfont-load