Font Fallback Stacks: Before the Font Loads
The fallback font is what users see first. Here is how I design fallback stacks that match the web font and reduce layout shift. The fallback font is the typeface users see before the web font loads, and on slow connections it may be all they see for several seconds. Despite this, fallback fonts are usually chosen by omission, with a generic sans-serif at the end of the font stack and no further thought. Designing the fallback deliberately is one of the highest-use typography improvements available, because it affects every user during the loading window and it reduces the layout shift that occurs when the web font swaps in. Why the Fallback Matters When the browser renders text in a fallback font and then swaps to the web font, any difference in metrics between the two causes the text to reflow. Headings change height, line lengths change, and elements shift on the page. This shift is measured as cumulative layout shift, and it is a real user experience metric that affects perceived quality. A fallback font that closely matches the web font in metrics produces minimal shift, making the swap nearly invisible. The fallback also shapes the first impression. Users form an opinion about a site within the first second, and if that second is spent looking at a mismatched fallback font, the impression is of a site that is not yet ready.