Repository navigation
perf(starter): cache fonts and add metric-matched fallbacks - #54
Merged
Merged
Conversation
Reloading a starter site redrew its text when the web fonts arrived: the font files were revalidated on every load (max-age=0), and the system font shown meanwhile had other metrics, so the swap moved the text. - Fonts move to /fonts/v1/ and public/_headers caches them a year, immutable. - scripts/font-fallbacks.ts generates font-fallbacks.css: one local fallback face per web font (size-adjust, ascent/descent/line-gap overrides, read with Capsize), listed right after it in the pairing stacks. Measured in Chrome, paragraph heights match the web fonts exactly (system fonts were 11-26% off). `pnpm check` and CI fail when the file is stale. - render_page / cloudhal render: new font-fallback check for web fonts with no metric-matched fallback after them. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Signed-off-by: Madraka <8898640+Madraka@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Reloading a site redrew its text when the web fonts arrived (layout shift). Two causes, both fixed:
/fonts/*was served withmax-age=0, must-revalidate, so every reload waited ~400–650 ms for the fonts. They now live under/fonts/v1/andpublic/_headerscaches them a year,immutable(a new font set gets/fonts/v2/).scripts/font-fallbacks.tsgeneratesfont-fallbacks.css: onelocal()fallback per web font withsize-adjustand ascent/descent/line-gap overrides (Next.js / Fontaine maths, metrics read with Capsize), listed right after each web font in the pairing stacks. Fraunces and Source Sans 3 carry a measured width correction (their variable default instances differ from body text).Measured in Chrome (640 px paragraph, 17 px): height difference from the web font is 0.0% for all six fonts (plain system fonts: −11% to −26%), widths within 1.2%.
Also:
render_page/cloudhal rendergain afont-fallbackcheck;pnpm checkand CI fail if the generated CSS is stale.Existing sites keep their copied starter files; new sites get the fix.
🤖 Generated with Claude Code