I have a website https://www.rosterelf.com/ and Google PageSpeed Insights keeps saying to me
Ensure text remains visible during webfont load
For this code <link rel="stylesheet" href="https://use.typekit.net/dgp2bhj.css">
Hence I have researched found out some ways to solve this and hence I updated to below code
<link rel="stylesheet" href="https://use.typekit.net/dgp2bhj.css?family=proxima-nova&display=swap">
By appending adding, ?family=proxima-nova&display=swap
in above code.
But Google PageSpeed Insights still throwing my the same error.
I have tried few other ways like enabling the cache in .htaccess
like ExpiresByType text/css "access 1 month"
etc .. but this error still exists.
Can someone guide me what should I do here ?
Many Thanks.
2
Answers
I can’t find any documentation about something like "?family=proxima-nova&display=swap" working for typekit. If you open up https://use.typekit.net/dgp2bhj.css?family=proxima-nova&display=swap, you’ll see the font display is set to auto.
However, you can edit your typekit configuration to set your display to swap, see this article:
https://helpx.adobe.com/fonts/user-guide.html/fonts/using/font-display-settings.ug.html
If you do not have controll over the typekit, you can set the display to swap in your local css file:
I’ve just solved that problem, to add the
font-display: swap;
property and remove the lighthouse warning, the file/link exported by Adobe must include that property on its settings, check this link for reference