Web Performance Calendar
Stoyan (@stoyan.org) is currently consulting for Etsy, Previously of Webpagetest.org, Facebook and Yahoo, writer ("JavaScript Patterns", "React: Up and Running"), speaker (dotJS, JSNation, Performance.now()), toolmaker (Smush.it, YSlow 2.0) and a guitar hero wannabe.
Let’s talk about font fallbacks and how we can craft these to to perfection in order to reduce layout shifts and our users’ headaches. Who among us has not experienced the horrors of clicking the wrong thing because stuff moves? Arghhhh! I’ll start with a brief intro and then focus on lessons learned (the hard way) and a new tool.
The fallback text takes very different “rectangle” on the page and, when replaced with the webfont, a layout shift occurs, hurting your CLS metric and, worse, hurting your users by making them click the wrong thing.
Unlike in the olden times where our fallbacks target DOM nodes (e.g. body) now we target @font-face declarations and the fallbacks apply to any and all DOM nodes, weight, styles, line-heights and so on. An example:
