Current state
We use fontaine@^0.8.0 for metric-matched fallback faces on the self-hosted Outfit font, wired up via FontaineTransform.vite() in vite.config.ts:385. This handles CLS: the swap from the system fallback to the real face shifts layout near zero. It works correctly with SvelteKit.
What fontless would bring
fontless is the framework-agnostic successor to fontaine, developed in the same unjs/fontaine repo (Nuxt and Qwik teams together with Daniel Roe). Where fontaine only generates the fallback metrics and leaves font sourcing to us, fontless is the full pipeline as a single Vite plugin:
- Auto-discovery of
font-family declarations from CSS, no manual config
- Provider resolution via
unifont (Google Fonts, Bunny, Fontshare, Fontsource, local)
- Automatic download and self-hosting of the font files
@font-face generation
- Plus the same fontaine fallback metrics for CLS
The win for us would be dropping the manual font management (self-hosting, @font-face wiring), not better CLS, since fontaine already covers that.
Blocker
fontless does not support SvelteKit yet, tracked upstream in unjs/fontaine#558. Until that lands, staying on fontaine is correct.
Action
Stay on fontaine. Watch unjs/fontaine#558 and revisit the migration once SvelteKit support ships. When migrating, the FontaineTransform.vite() block in vite.config.ts and the fontaine dependency in package.json are the two touchpoints.
See also: unjs/fontaine#558
Current state
We use
fontaine@^0.8.0for metric-matched fallback faces on the self-hosted Outfit font, wired up viaFontaineTransform.vite()invite.config.ts:385. This handles CLS: the swap from the system fallback to the real face shifts layout near zero. It works correctly with SvelteKit.What fontless would bring
fontlessis the framework-agnostic successor tofontaine, developed in the sameunjs/fontainerepo (Nuxt and Qwik teams together with Daniel Roe). Wherefontaineonly generates the fallback metrics and leaves font sourcing to us,fontlessis the full pipeline as a single Vite plugin:font-familydeclarations from CSS, no manual configunifont(Google Fonts, Bunny, Fontshare, Fontsource, local)@font-facegenerationThe win for us would be dropping the manual font management (self-hosting,
@font-facewiring), not better CLS, since fontaine already covers that.Blocker
fontlessdoes not support SvelteKit yet, tracked upstream in unjs/fontaine#558. Until that lands, staying onfontaineis correct.Action
Stay on
fontaine. Watch unjs/fontaine#558 and revisit the migration once SvelteKit support ships. When migrating, theFontaineTransform.vite()block invite.config.tsand thefontainedependency inpackage.jsonare the two touchpoints.See also: unjs/fontaine#558