There are several reasons adding the font loading manager is important. Fonts, scale, ligatures, balancing copy: it’s starting to really come together 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 don’t want to introduce anything that, should it fail to load or execute, will undo the work that came before. Adding JavaScript at this point is meant to smooth out the process during the loading of the page, and again on subsequent pages. Next we add fonts and additional styles for greater hierarchy and aesthetics.
The first layer is HTML-so we focus on good, sensible markup of headings, paragraphs, etc. Typography is an enhancement to the content, so I want to do as much with each additional layer as possible. 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. I point this out so you can understand the motivation in my own philosophy about web typography. This is also the first time in the project that we’re adding JavaScript to the mix. I first wrote about some of these ideas and techniques back in 2011 for Monotype’s blog, and they’re still relevant today.
This week we’re going to add font loading management and style our fallback fonts. Last week we added web fonts to our project-both static and variable versions. Monday, 11 May, 2020 Part 4: Fixing FOUT with font loading & fallback tuning
