Ensure text remains visible during webfont load - TypeKit PageSpeed Insights

Question

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.

Answer 1

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

Answer 2

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:

@font-face {
            font-family: 'proxima-nova';
            src: local('proxima-nova'), url(https://use.typekit.net/dgp2bhj.css);
            font-display: swap;
 }