Self-hosting fonts without the layout shift
Self-hosting removes a third-party request and a third-party cookie. It also removes the one thing a font CDN gives you for free: somebody else has already worked out how to stop the swap from moving the page.
Metric-matched fallbacks
A fallback face with overridden metrics occupies nearly the same space as the real one, so the swap changes the shape of the letters rather than the position of everything below them.
/* Metric-matched fallback for Inter. */
@font-face {
font-family: "Inter Fallback";
src: local('Arial'), local('ArialMT');
ascent-override: 90.4365%;
descent-override: 22.518%;
line-gap-override: 0%;
size-adjust: 107.1194%;
}What was measured
| Case | Files | Transferred | CLS |
|---|---|---|---|
| Cold cache, English article | 2 | 69 KiB | 0 |
| Cold cache, article with code | 3 | 109 KiB | 0 |
| Spanish article | 2 | 69 KiB | 0 |
No preload is declared. Preloading a font competes with the largest contentful paint fetch, and with a metric-matched fallback the swap is invisible enough that it is not worth the contention.
About the author
