Part 4: Fixing FOUT with font loading & fallback tuning. And saving the orphans.

Last week we added web fonts to our project — both static and variable versions. This week we’re going to add font loading management and style our fallback fonts. I first wrote about some of these ideas and techniques back in 2011 for Monotype’s blog, and they’re still relevant today. This is also the first time in the project that we’re adding JavaScript to the mix. I point this out so you can understand the motivation in my own philosophy about web typography. I want to focus efforts on doing as much as possible with good HTML and then CSS, as I feel that’s the most appropriate. Typography is an enhancement to the content, so I want to do as much with each additional layer as possible.

The first layer is HTML — so we focus on good, sensible markup of headings, paragraphs, etc. Then we add sizes and margins and color. Next we add fonts and additional styles for greater hierarchy and aesthetics. Adding JavaScript at this point is meant to smooth out the process during the loading of the page, and again on subsequent pages. Not necessary, but an enhancement. I don’t want to introduce anything that, should it fail to load or execute, will undo the work that came before. So we’re introducing FontFaceObserver from Bram Stein to smooth out the loading process, and as a bonus we’re also going to add Widow Adjust from Nathan Ford. I’ll explain that one later on.