I built my homepage to be pretty lightweight, but it seems that it's pretty easy to mess up: the total size for it in my case is 573 KB, of which 435 KB is fonts:
PT Sans Bold (WOFF2) - 113 KB
PT Sans Regular (WOFF2) - 111 KB
PT Sans Italic (WOFF2) - 105 KB
Material Icons (from the library) - 102 KB
And that's just when including a single type of font (though one could rely upon the browser for bold/italic variations, even if sometimes sub-optimal) and some sub-optimal cruft from the library (since some toolchains might allow importing only a few SVG icons otherwise, but that's a more modern approach than what I went for).
One option to optimize things further (while keeping the fonts) would be splitting them up into character sets and downloading only what you need, like Google Fonts does: https://fonts.googleapis.com/css2?family=Open+Sans&display=s... however good luck figuring out how to do that with your own self-hosted fonts.
Now the article talks about render-blocking fonts, so technically you can just use "font-display: swap" and make it less of a problem, or say no to using custom fonts in general, but the latter won't always be an option.
For another example of how easy it is to mess up, look at Mastodon - the other day I opened a post that had lots of replies and my browser loaded 35 MB of 400x400 profile pictures of users in PNG format. While not everyone wants to use WebP, even JPG with a comparatively lower quality would decrease that bandwidth usage tenfold, as would using something smaller for a profile icon that shows up as 36x36 pixels large in the UI. Nothing against Mastodon, I actually rather like it otherwise, just an example of how it's easy to waste bandwidth.
i say it is not just the have and the have-not, every byte costs electric energy. We dont have put enough effort in having electricity that dont harm the climate. We should reduce sending unnecessary bytes as a little effort to save our planet.
One option to optimize things further (while keeping the fonts) would be splitting them up into character sets and downloading only what you need, like Google Fonts does: https://fonts.googleapis.com/css2?family=Open+Sans&display=s... however good luck figuring out how to do that with your own self-hosted fonts.
Now the article talks about render-blocking fonts, so technically you can just use "font-display: swap" and make it less of a problem, or say no to using custom fonts in general, but the latter won't always be an option.
For another example of how easy it is to mess up, look at Mastodon - the other day I opened a post that had lots of replies and my browser loaded 35 MB of 400x400 profile pictures of users in PNG format. While not everyone wants to use WebP, even JPG with a comparatively lower quality would decrease that bandwidth usage tenfold, as would using something smaller for a profile icon that shows up as 36x36 pixels large in the UI. Nothing against Mastodon, I actually rather like it otherwise, just an example of how it's easy to waste bandwidth.