Passing google pagespeed using google fonts

Question

is it possible to pass google pagespeed while using google fonts? I've found this peace of code (https://github.com/typekit/webfontloader) which is also recommended by google. But even if I load this script, I can not pass google pagespeed.

Answer 1

WebfontLoader is not compatible with display swap. Not sure that this is the good solution.

Be sure to use the last url from Google Font with display=swap

<!--old code-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!--new code-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

The other problem with Google font is that this is using 2 domains. https://fonts.googleapis.com and https://fonts.gstatic.com/

You should use dns prefetch and preconnect in the header:

<link rel="dns-prefetch" href="//fonts.googleapis.com">

and

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

Perhaps, the best solution is to download the font in your server.

Here is an article in french about optimising font for PageSpeed : Optimiser les fonts pour accélérer son site

Answer 2

The stunning truth is that you will do better in PSI if you localize your fonts rather than serve them from Google.

It sounds crazy but we tried 5 different implementations and localizing the fonts rather than serving off of Google URLs scores the beat