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