“System fonts don’t have to be ugly /// Iain Bean”
I like this overview of system fonts you can use. Many of these are extremely capable and attractive fonts whose aesthetics and functionality are first rate.
But I also agree with this short statement that comes towards the end of the post:
Byte-for-byte, JavaScript is more expensive for the browser to process than the equivalently sized web font. When prioritising what to spend your performance budget on, remember that web fonts contribute to the beauty of your site. Tracking JavaScript does not.
For some reason the distinction between types of payloads is sometimes getting lost in the discussion. You see developers talk about using system fonts, use “blur hashes” and lazy-loading images, or even dropping images altogether all the while they are ratcheting up the JS payload.
Image decoding is multithreaded and often hardware accelerated.
Web fonts are rendered using tightly optimised code and are extremely cacheable, provided you use the correct HTTP and CSS settings.
And even CSS code that’s “slow” is still an order of magnitude faster than most website’s fast JS.
We need a sense of proportion in the bandwidth and performance debate and JS is proportionally much, much worse for performance than any other part of the web dev stack.