Hi,
I’m building a new website using Bricks and this time, I disabled ‘Use Google Fonts’ as a recommended best practice. I have to admit that fonts are a brave new world for me, so I am looking for some advice, guidance, or online tutorials to help me understand the recommended approach.
I’m a bit confused about the best way forward if I now want to use a Google Font as a custom font. On the Google website, I see many variations (regular and italic for each weight, so 20 in total).
In general, should I download them all, or only the ones I am using right now, since loading more can unnecessarily impact performance? And in the latter case, what happens if I choose a different weight in the UI? The font seems to get bolder, but not as much as loading the actual font weight.
The easy (lazy?) option would be to download them all so I don’t have to think about it when I want to use a different weight. However, from looking at many online manuals where they mostly pick and choose, it seems there are some drawbacks to this approach.
Thanks for all suggestions!
[ad_2]
Less assets = faster loading page.
You want to cover all the variants that you are using and only that. When everything works properly browser shouldn’t download fonts that aren’t actually used on a page.
However it is really glossed over that Google Fonts does A LOT of optimization and serves completely different (!) instructions to browsers, depending on their capabilities. There are some non-trivial features, such as Unicode ranges, to support loading as little as possible, while still supporting rich fonts with multiple characters sets.
Personally I tend to use Bunny Fonts (drop-in Google Fonts replacement, slightly worse on features, I think they gave up on supporting variable fonts), because I am absolutely not looking to rebuild all the optimizations for self-hosting (and with static hosting I couldn’t even if I wanted to).
I only download what I need.
I convert the font to woff2
Only use woff2
Bonus points if use a variable font, the same file can be used in different font weights, under custom fonts in Bricks.
That way I keep the website running lean.