My site is using a system font stack, mostly because I would like to have the lightest website possible.
If I want to be listed in the 512kb.club, every kB added to the website matters.
My featured images, heavily optimised, still account for large LCP (Largest Contentful Paint) and adding custom fonts can increase the overall weight of the website, way above 512kB.
I am happy with my site, but on others, I need to use specified fonts to get the right visual experience across all user devices. In that case, I need to load additional fonts to accomplish that.
The fonts not only add weight to the website but also can have a negative impact on CLS (Cumulative Layout Shift) if loaded incorrectly. As CLS is part of essential Core Web Vitals, its poor score can drop down a website significantly in Google Search results.
Ironically, Google, on their Google Fonts website provides information (code) on how to implement the desired font in our website. The problem is, that their solution will have a negative impact on your website.
Not only they are loaded from an external source, but the speed of loading of your website and external fonts can also vary and cause CLS.
A widely recommended method is to self-host your fonts (even these from Google). This, in most cases, may improve an impact on CLS, however not always. There are plenty of factors on how these fonts are delivered. If our hosting is poor and we are not using CDN (Content Delivery Network) then we can see worse results than loading fonts directly as Google advised.
Self-hosting fonts are the right approach, but it requires a couple of tweaks before it will work well for us in matters of web performance.
Let’s start with, how to load them correctly.