Today I will address the answer to a simple question: from an SEO point of view, is it better to load fonts locally or download them from repositories such as. Google Fonts?
Spis treści
First, the answer: it depends
Without seriously delving into the issue, someone might think that it would be much better for SEO to load fonts locally, from your own server. One less query to the external server, we are sure that the font will load, after all, if the page loads then the font will also….
But, but. Let’s take a closer look at this issue. Local loading seems natural, especially considering that tools like Gtmetrix strongly discourage the proliferation of queries to external servers. Because in theory, it could slow down the site. Well, that’s right, in theory.
Sometimes slower is faster
If you don’t care about Pagespeed points, but about real speeding up your site, loading fonts from outside is a pretty good idea.
If we use popular fonts like Summer or Roboto, there is a very good chance that a user visiting our site already has them in the browser cache. This means no less than that he will not have to download the font file either from Google Fonts or from our server, because he already has it with him. Faster is not possible.
Despite the extra query that our site can theoretically make, there is a good chance that loading will be faster.
CSS hocus-pocus
It is also not insignificant that loading fonts externally from a source such as Google Fonts ensures (in theory 100%) hardware-browser compatibility, good appearance at high DPI, scalability. Google serves a different CSS for the font requested by the user on Chrome, and a different one for the user on Safari. This is also some code saving, because by embedding the font locally in 99% of cases we will put all possible code into one .css file
Is it always worth relying on Google Fonts?
Not always. If you use a very rare font – your users are unlikely to use the browser cache.
Besides, if you select Customize in Google Fonts and narrow down the parameters of the downloaded font (typeface thickness, supported alphabets, etc.) then for the browser the code:
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,500i&subset=cyrillic-ext,greek" rel="stylesheet">
…will be something quite different from:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
…and the browser will probably proceed to download the font anyway.
Google Fonts’ biggest sin
Google, in its guidelines for webmasters and various tools that support their work, outright loves to include recommendations that it later makes impossible to implement.
This is also the case here, and the problem is the inability to use the font-display attribute when downloading a font from Google Fonts.
If you don’t already know what font-display is, that’s a mistake – it’s a very important attribute that I write more about here: what is font-display.
Of course, nothing is impossible and you can stand on your head to somehow push this font-display, but this is already a job for the programmer. You can find the guide here.
To sum up from an SEO point of view
When to load fonts locally?
- when the font is rather rare
- when you handle unusual alphabets
- When you care about using font-display and don’t have much programming knowledge
When to load fonts from Google Fonts?
- when you use popular fonts
- When you want to ensure high readability of your site on all hardware platforms
- When the speed of your server does not satisfy you
The best solution?
The best solution in most cases (especially with popular fonts) would be to suck the font from Google Fonts, with the font-display set and the fallback font downloaded locally.
In practice, of course, it all depends on the needs of the site.
