Fonts, performance, & learning

I’ve spent the week I have between projects learning more about web fonts. A while back I decided I wanted to self host my fonts and get to know the ins and outs of making that work and work well. On Twitter I asked for type recommendations and got a lot of really great ideas; I ended up going with a small foundry in New Zealand, Klim. Some times too much choice is overwhelming for me so I limited myself to one foundry with limited options.

I like quirky fonts, especially for headings, but I really wanted to stick with just one font family, I didn’t want to load too many fonts and was trying to be careful of that in my choice. Klim’s Feijoa fit the bill. The display font is a quirky and fun serif and the body text has enough character for me, but is still easy to read. Step one of my self hosting process was complete, I purchased Feijoa.

Next up: read things on the latest techniques. Fortunately for me, Bram Stein wrote a brilliant book all about how to do things with web fonts and make them fast. I started reading the book and immediately made a new branch and got to work. Honestly, putting in some @font-face rules is the easy part. The hard part is making it fast and helping people see text no matter the speed of their connection.

I set about getting my font pulling onto my site and then read up on how Stein recommended you make it fast with an async load in JavaScript. I’ve implemented Font Face Observer to make it so text shows up right away with the back up font and once the Feijoa has loaded you see it. I’ve also tried hard to pick a decent stack and I feel lucky, Feijoa and Georgia aren’t too far off, so it’s working fairly well. I’ve tested things in throttling conditions to see what people experience, and text shows up quickly and then adjusts. Which is exactly what I want, if the font never loads, you can still read these words.

Since I was on the performance bandwagon I decided to also do a few other things. I’m lucky to have worked with Wilto who has cleaned up the performance of an open source project I still help out with, Open Design Kit. So I started poking around that code to see how I could do more for performance. This site is now using Critical CSS and I’m using preload, with a polyfill, to help load CSS asynchronously without blocking any rendering.

I do have one performance issue on this site that I’m still not sure the best way to work around, but a few of my art images are quite large, even when using srcset the larger version is big. But it’s art and I want it to be a good image, so I’m living with that for now while I think about what, if anything, I want to do.

I’m eagerly waiting for a few things to gain more support in CSS though, so that most of this JavaScript isn’t necessary. I can’t wait for both preload and font-display to be supported by browsers. preload is partially supported, but font-display is still in a draft specification, so it’s farther away, but hopefully some day. In addition, font-size-adjust has some support right now, but it would make the loading of fonts not as jarring by helping to get fonts closer in x heights. The future is exciting, I like that more control will be in the CSS, giving more people who understand and use CSS easy ways to interact with web fonts.

This site has gotten faster, hopefully, and I’ve learned a lot of the ins and outs of some tried and true methods for performance that involve a bit of JavaScript. I know, I’m shocked too, I’m saying something good about JavaScript!

A huge thank you to this community, for all the work they do. It wasn’t only Stein’s book that helped me figure all this out, but Filament Group’s Critical CSS for Grunt, Zach Leatherman’s go to article on fonts (so good!), Wilto who answered questions as I was working on the various pieces of this, and general encouragement from friends. So many people freely give their knowledge in this community and it’s always so amazing to be reminded of that and benefit from it.