Measure and Reduce Layout Shift From Web Font Substitution

font-family: 'Courier New', monospace;
/* later swaps to Georgia */

font-family: Georgia, serif;
/* final face available before layout */

Root cause

Fallback and final fonts can have different glyph widths, ascent, descent, and line-gap metrics. A heading that fits in three lines with one face may use four with another. When the browser swaps faces after initial layout, everything after that heading can move.

This fixture deliberately isolates metric substitution from networking. The failing state changes from Courier New to Georgia after the first measurement. The fixed state starts and ends with Georgia, representing a critical final face available before first layout. It is a repeatable geometry test, not a simulation of a specific connection or font provider.

Production choices

Early loading is one option, but it is not the only one. For a real web font, measure the actual final and fallback files. Depending on the result, use an appropriate preload and delivery strategy, choose a closer fallback, or define tested size-adjust, ascent-override, descent-override, and line-gap-override values. Do not copy percentages from an unrelated font pair.

Measurement support

Every browser run records the heading height before and after substitution plus the following panel’s vertical movement. Chromium additionally records non-input layout-shift performance entries. Firefox and WebKit results do not claim Layout Instability API support.

When this fix is not enough

Making every font render-blocking can delay text and harm other performance metrics. Metric overrides can also be wrong for a different weight, script, variable-font axis, or platform font version. Test the exact production files, text languages, weights, and browser set.

Regression condition

At 320 and 375 CSS pixels, the failing substitution must change heading height and move the following panel by a positive amount. The fixed state must leave both the heading height and target position unchanged. Both states must have zero page-level horizontal overflow.