Skip to content
Performance·Advanced·Conceptual·1 min read

How do you eliminate the layout shift caused by the fallback-to-webfont swap?

Short interview answer

Define a fallback @font-face over a local system font with size-adjust, ascent-override, descent-override, and line-gap-override tuned so the fallback occupies almost the same space as the web font. When the swap happens, metrics barely change, so text doesn't reflow.

Key takeaway

Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.

← Back to Web font loading performance

Related questions