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.
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.
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.
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.