Web fonts, without the jank

About this presentation

Fallback fonts. They don't often get much of our attention, after all, they are only a fallback! But their importance is growing with a focus on user experience metrics like Cumulative Layout Shift (CLS) — a metric targeted at improving janky page load experiences. In this talk, we will explore modern CSS font-face descriptors, such as size-adjust and metric overrides, and leverage fallback fonts for better alignment with web fonts. To achieve this, we journey through the world of font metric tables and how we can use them to calculate the required CSS, dramatically reducing layout shift on page load — all the design aesthetic of web fonts, without the jank.