Playing with web fonts

I updated this blog’s fonts, because I wanted to make it more snappy to download and display. It uses the Charter and Anonymous Pro as body and mono-space fonts. Before the update Charter was a WOFF font hosted on my server and Anonymous Pro was a TFF font hosted on Google® Fonts™ —another piece of Google®’s surveillance network—.

Instead, I stole the ideas in the CSS from Butterick’s Practical Typography, and embedded the WOFF2 formatted fonts encoded as base64 strings in the CSS style-sheet. Before this update, the browser used the default system fonts while the external fonts loaded and then swapped the fonts. This made the page blink a second after it appeared, that blinking effect is now gone.

All the fonts together weight about 140KB which is a bit much for a mandatory resource. My index page with all the posts I made since 2012 and the fonts gzipped weights 210KB as of today. That’s far from the tens of Megabytes of data the typical webpage eats in bandwidth. So hopefully this translates into a better experience for you, my readers.

According to Firefox’s debugger this blog takes 32 seconds to fully download and display on a GPRS connection —about 10KB/seconds—; that works out about 2.5 seconds on a 3G connection.

There’s something else I’d like to improve: WOFF2 fonts are supported only by relatively new browsers. I would like to find a way to load the font only if the browser supports it. Maybe a second CSS that’s conditionally loaded would do the trick.

That’s all for today.