Font Fallback

The typeface in a design is installed on the computer of whoever made it. It isn't installed on the user's device. That obvious fact takes a while to surface as a problem, because the screen keeps looking correct to the person who built it and the person who reviewed it.

So the mismatch appears somewhere else first. A paragraph that fit on a Mac takes one extra line on Windows, and text inside a button wraps to two lines and breaks the button's shape. Korean text rendering in a serif face is another common one. Same code drawing the screen, different result per device.

Font fallback is the practice of writing down the order of substitutes instead of just one typeface name. It puts the decision about how each device renders text back with the people who built it.

Typefaces get declared as a list rather than one name, and the first usable entry wins. If the first can't be used, it moves to the second; if that fails too, the third.

The order usually has three parts: the web font that gets downloaded, then a typeface commonly installed on devices, then a generic family name. Leave that last slot empty and it drops to the browser default, which for Korean is usually a serif face.

Korean brings one failure that catches people out. Put a Latin typeface first and it has no Korean glyphs, so Latin renders in the intended face while Korean falls through to the next entry — two typefaces inside one sentence. Declaring the Latin face, then a Korean face, then a generic name avoids it.

When choosing a fallback typeface, look at character width rather than at its shape. Fall through to a wider face and the same sentence occupies a different number of lines, which shifts the layout. There's usually a brief window where the substitute shows before the download finishes, and a large width difference makes the text visibly jump once. Check the weights too: if the substitute has no 600, the font weight you specified gets faked and the heading reads heavier than intended.

"There's one extra line on Windows only. Can you check the fallback?"

A different typeface is being used depending on the device.

"Text is invisible until the font arrives. Let's show the substitute first."

Better to render something readable than to render nothing.

"There's no Korean face in the fallback list."

Nothing decides what Korean renders in.

At Pagedeck, Theo rewrote the fallback list: one Latin face, one Korean face, one generic name. He picked substitutes with similar character widths so that line counts hold while the substitute is showing.

Noa then checked the result on both Windows and a Mac. Review the design on one machine only and this difference never shows up.