fontsgoogle-pagespeedwebfont-loader

Passing google pagespeed using google fonts


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.


Solution

  • 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