rodneylab/sveltekit-fontaine

SvelteKit Fontaine ✍🏽 how to eliminate or reduce font swap cumulative layout shift working with custom, self-hosted fonts in ❤️ SvelteKit.

SvelteKit Fontaine

sveltekit-fontaine

Demo code for using Fontaine to reduce font swap Cumulative Layout Shift (CLS) with SvelteKit. The code accompanies the SvelteKit Fontaine post. If you have any questions, please drop a comment at the bottom of that page.

Building and previewing the site

If you're seeing this, you've probably already done this step. Congrats!

git clone https://github.com/rodneylab/sveltekit-fontaine.git
cd sveltekit-fontaine
pnpm install # or npm install
cp .env.example .env
pnpm dev

Building

pnpm run build

You can preview the built app with pnpm preview, regardless of whether you installed an adapter. This should not be used to serve your app in production.

Feel free to jump into the Rodney Lab matrix chat room.