@font-face is a nice idea but…

24 January 2014

Update from 3rd March 2014: It looks like this problem may be going away.

I like the idea of @font-face, but some implementations leave a little to be desired.

I was trying to read a webpage on a 3G Internet connection and the font was taking more than a little while to download. Unfortunately, Chrome doesn't render text in a fallback font while it is waiting for the desired one to download.

The result is a wall of white space, interspersed by headings and bullet points.

The page contained 350kb of fonts, which isn't much these days when it is unusual for people to have slower than 10Mbps connections … at home … in the country where I live.

When you start dealing with mobile connections, which can be intermittent when moving, have weak signals in some locations and suffer from high levels of contention in busy urban areas, 350k is suddenly a lot of data for something that will prevent people from reading the text on your page.

As a developer, I'm leaning away from using font-face these days, the "show nothing until the font has loaded" approach in Chrome is too crippling when there are problems loading the fonts (NB: The CSS for this site was written before I wrote this entry).

As a user, I'm going to dig out something to strip the stylesheets from pages so I can read them if their fonts are missing.