-
I just learned a new thing about web font loading and I’m super pumped up about it. Learning is fun 🕺
-
Pretty sure I found bugs in both Firefox and Chrome while testing this. Safari, you’re cool (thanks be to @Litherum)
-
As @AmeliasBrain notes in @AmeliasBrain/1043184820346445824, swapping the order of the @font-face blocks (subset last) and using the same font-family name works much better in Firefox.
-
BUT—Cross browser font loading behavior is still inconsistent: 👍🏻 Firefox: FOUT on missing glyphs 👍🏻-ish: Safari FOIT on missing glyphs 👎🏻 Chrome FOIT on everything Luckily we can use
font-display: swap
to iron those differences out to our desired preference 🏆 -
The big takeaway here (inspired by a @_munter_ slide) is that this approach—when paired with
font-display
—could be a very easy/nice way to do a two stage load for a single web font without requiring any JavaScript. -
The remaining drawback or outstanding problem being that the subset font is still in use after the full font is loaded. We want to remove it from use entirely so there is no crossover—to take full advantage of any OpenType features in the full font—ligatures, kerning, etc.