Better web font loading with JavaScript

Published by


In my epic-length debut post for the Typekit blog, I explain why we use JavaScript (instead of just CSS) to load web fonts, what our JavaScript does at load time, some of the problems this method helps us solve, and how we've solved them.

Along the way I compare web servers to coffee shops:

If you can, imagine a web server as a coffee shop where none of the customers know what they want and the barista has to ask a bunch of questions to help them decide. That’s what server-side detection is like. Browsers request something very generic, like coffee.css, and it’s up to the server to figure out what kind of coffee they need. This is fine as long as the shop isn’t crowded. But when there’s a line, having to go through this negotiation process for every customer will slow things down and frustrate everyone.

Big thanks and props to the great Mandy Brown, whose editing skills are (unlike the public debt of the United States) not to be questioned, as well as all my Typekit colleagues who offered feedback and constructive nitpicking.