skip to Main Content

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


  1. 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;
     }
    
    Login or Signup to reply.
  2. 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

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search