How to optimize Google Fonts loading on static website?

Forum Moderators: not2easy

Message Too Old, No Replies

How to optimize Google Fonts loading on static website?

born2run

2:21 pm on Dec 6, 2021 (gmt 0)

Hi so I have a static website and in it I'm loading a Google Font by placing the following CSS code given by G:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,500&amp;display=swap" rel="stylesheet">

Is there any way I can speed up loading of this font? Page Speed insight advises me to fix this issue (750ms to load fonts). Thanks!

graeme_p

2:41 pm on Dec 6, 2021 (gmt 0)

Have you tried loading the font locally? All Google Fonts are open source licensed, so you can just copy the font and link to it locally.

With luck it will mean fewer dowloads and DNS lookups (the above downloads a style sheet from one domain which then downloads the fonts from another)

[fonts.gstatic.com ]

I am not sure it will work, but its worth a try.

martinibuster

4:56 pm on Dec 6, 2021 (gmt 0)

The code you posted is optimized already, with the preconnect link atttribute (also referred to as a "resource hint"). The last step is to place that code as high up in the head section as you can.

If that code is only used for a logo there's a further way to optimize it, but afaik, there's no further way to optimize that font code.

born2run

6:09 pm on Dec 13, 2021 (gmt 0)

Ok thanks I'll leave the code as is.

bananaseo

2:17 pm on Dec 14, 2021 (gmt 0)

As already mentioned loading the fonts locally would be best practice. If you don't want to that you also can put the preconnect links inside your http header (e.g. via .htaccess), instead of the source code. This should also give you a little more optimized results.