Creating Perfect Font Fallbacks in CSS | Aleksandr Hovhannisyan

I've been thinking about this article by Jim Mitchell on using Phosphor Icons for Micro.blog navigation but haven't finished implementing it with my preferred icon font, tabler.

I was researching what would happen if someone was to read the site and the font is not available – for example, RSS – when I came across a post talking about descent-override.

While font metrics are baked into a typeface’s definition, there are various CSS properties that allow stylesheet authors to override those metrics. Among them, the three most important ones that we’re interested in are size-adjust, ascent-override, and descent-override.

I’ve currently have a small selection of fonts being referenced, to verify for myself that the font isn’t downloaded when not used. I want to make this a two step rollout as I redo my page navigation and change the spacing in the articles.

Be sure to check out Jim’s blog for lots of great content!