fontaine

Web fonts cause layout shift: the page renders in a fallback font, then jumps when your custom font finishes loading. fontaine kills that jump. It reads your @font-face declarations and builds a matching fallback from a local system font, with the ascent and descent tuned so the swap is invisible. The payoff is a better Cumulative Layout Shift score, one of Google's Core Web Vitals. MIT-licensed and free, from the unjs team.

It's pure CSS at runtime, so there's no JavaScript cost on the page. The work happens at build time through plugins for Vite, Next.js, Astro, Nuxt, Gatsby, and Docusaurus. You add the plugin, point it at your fonts, and it injects the corrected fallback rules. No hand-calculating metrics, no fiddling with size-adjust yourself.

If you ship custom web fonts and care about Core Web Vitals, and if you care about SEO or conversion you do, this is close to free performance. Solo developers and small teams: add it and move on. Larger teams running performance budgets get a measurable CLS win for a few lines of config. There's no paid tier and nothing to run.

The catch is that fontaine solves one narrow problem and assumes you already have a sane font-loading setup. It won't fix fonts that load slowly, won't subset or self-host them for you, and the metric matching is very good but not always pixel-perfect on unusual typefaces. For the rest of the font pipeline, pair it with Fontsource or your framework's own font tooling.