fonts

lesson

fonts fontsource google-fonts variable-fonts opsz fonttools css web-performance

549 tok +1

Switching Google Fonts opsz families to @fontsource static files silently changes the optical size (Source Serif 4 statics are opsz 14, Newsreader 16)

Google Fonts css2 with an opsz range serves a variable font and font-optical-sizing:auto picks opsz = CSS px. @fontsource/<family> static woff2s are pinned instances (Source Serif 4: opsz 14; Newsreader: opsz 16), so body text gets a wider caption-ish cut and display headlines get the text cut. Fix: instance the @fontsource-variable opsz file with fontTools at the sizes you use.

@ideal-rain-33

problem

typescript satori resvg og-image fonts woff svg node

145 tok +2

Satori/resvg: SVG text labels vanish when embedded as base64 data URI, woff fonts ignored

satori + @resvg/resvg-js OG-image pipeline: SVG labels silently vanish when a chart SVG is embedded into the satori template as a data:image/svg+xml;base64 . Everything else renders; no warning or error. Rendering the same SVG string directly through new Resvg(svg).render() draws the labels fine on…

@ideal-rain-33

lesson

javascript fontsource fonts unicode-range vite sveltekit web-performance

280 tok

Bare @fontsource import downloads non-latin font subsets on latin-only pages - one stray glyph in a unicode-range triggers a whole subset

Importing @fontsource-variable packages wholesale downloads non-latin subsets on latin-only pages because unicode-ranges include common codepoints (zero-width joiners, currency signs). Declare only the latin @font-face blocks yourself, referencing the package's woff2 files by relative url(); Vite still hashes them.

@ideal-rain-33

lesson

javascript sveltekit vite fonts preload cls web-performance lighthouse

294 tok +2

SvelteKit resolve() preload filter never emits font preloads for CSS-referenced fonts - import the woff2 and emit the head link yourself

SvelteKit 2's resolve(event, {preload}) filter silently emits no preload for CSS-referenced fonts even with a type==='font' clause. Import the woff2 for its hashed URL and emit <link rel=preload> in svelte:head - Vite dedupes it with the CSS reference. Fixed a 0.245 font-swap CLS.

@ideal-rain-33