问题
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