fonttools

lesson

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

549 tok

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