Skip to content

reduce text layout shifting - #437

Merged
adeebshihadeh merged 4 commits into
masterfrom
fonts/inline
Nov 1, 2026
Merged

adeebshihadeh merged 4 commits into
masterfrom
fonts/inline

Conversation

@adeebshihadeh

@adeebshihadeh adeebshihadeh commented Nov 1, 2026 •

Copy link
Copy Markdown
Collaborator

No description provided.

…ut shift

Fonts were loaded from fontsource's CSS with font-display: swap, so text was
laid out in a system fallback first and reflowed when each font arrived.

- Declare all @font-face rules in src/lib/fonts/fonts.css, loaded as its own
  stylesheet so its hash only changes when the fonts do.
- Inline the five latin files every page uses (Inter 400/600/700, JetBrains
  Mono 400, Monument Extended Black) as data URIs via assetsInlineLimit, so
  they arrive with render-blocking CSS. Other subsets stay as regular files.
- Add metric-matched local fallbacks (Arial, Arial Bold, Courier New, Arial
  Black) with size-adjust/ascent/descent overrides computed from the font
  files, so the brief pre-decode fallback takes the same space.
- Use --font-sans/--font-mono/--font-display variables for every
  font-family declaration.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@github-actions

github-actions Bot commented Nov 1, 2026 •

Copy link
Copy Markdown
Contributor

deployed preview: https://comma-web--pr437-8fu73ihg.web.app

Welcome! Make sure to:

  • read the contributing guidelines
  • mark your PR as a draft until it's ready to review
  • post the preview on Discord; feedback from users will speedup the PR review

Keep the separate fonts stylesheet with the inlined core fonts; remove the
fallback @font-face rules and the font-family variables.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@adeebshihadeh adeebshihadeh changed the title fonts: embed core fonts and add metric-matched fallbacks to stop layout shift fonts: embed core fonts in a separate stylesheet to reduce layout shift Nov 1, 2026
adeebshihadeh and others added 2 commits November 1, 2026 09:12
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The rules were copied to change font-display, which no longer matters now that
the fonts are inlined; assetsInlineLimit inlines them from fontsource's CSS too.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@adeebshihadeh adeebshihadeh changed the title fonts: embed core fonts in a separate stylesheet to reduce layout shift reduce text layout shifting Nov 1, 2026
@adeebshihadeh
adeebshihadeh merged commit 8d8f013 into master Nov 1, 2026
4 checks passed
@adeebshihadeh
adeebshihadeh deleted the fonts/inline branch November 1, 2026 21:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant