Web fonts: self-hosted Literata + Inter (variable, latin subset)#13103
Draft
lokesh wants to merge 1 commit into
Draft
Web fonts: self-hosted Literata + Inter (variable, latin subset)#13103lokesh wants to merge 1 commit into
lokesh wants to merge 1 commit into
Conversation
- Ship latin-subset variable woff2 fonts (Literata wght 400-700 / opsz 12-36, ~55KB; Inter wght 400-700, ~50KB), built with fonttools varLib.instancer + pyftsubset (pipeline documented in static/fonts/README.md). - New tokens/font-faces.css: @font-face with font-display: swap, latin unicode-range, and metric-adjusted local fallbacks (Georgia/Arial with size-adjust/ascent/descent overrides) - measured CLS 0.01 on a throttled cold load. - Preload both fonts in site/head.html (crossorigin, required for font preloads; verified single fetch per font). - font-families.css: primitives now lead with Inter/Literata; all semantic tokens reference the primitives instead of verbatim copies (fixes --font-family-code Menlo divergence). Headings stay sans for now - the serif flip lands with the type-scale PR. - Fix undefined var(--body-family) in legacy.css (-> --font-family-body). Non-latin scripts fall back to system stacks via unicode-range; italics are synthesized.
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
1 participant
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.
Self-hosted web fonts: Literata (serif) + Inter (sans)
Second PR of the visual modernization series (independent of #13102 — can land in either order). Replaces the system Georgia/system-sans stacks with two self-hosted OFL variable fonts:
wght 400–700, variableopsz 12–36, latin subset → 55 KB.wght 400–700, latin subset → 50 KB.Total font payload: 105 KB, fetched once and cached. Headings intentionally stay sans in this PR — the serif-heading flip ships with the type-scale PR so it can be reviewed together with the heading hierarchy.
How it works
static/css/tokens/font-faces.css(new, in the tokens bundle):@font-facewithfont-weight: 400 700,font-display: swap, latinunicode-range(non-latin scripts fall back to system stacks), plus metric-adjusted local fallbacks (Literata-fallback= Georgia,Inter-fallback= Arial withsize-adjust/ascent/descent/line-gapoverrides) so the swap barely moves anything.site/head.htmlwithcrossorigin(mandatory on font preloads — verified exactly one fetch per font,initiator=link, no double-fetch).font-families.css: primitives lead with the new fonts; all 8 semantic tokens now referencevar(--font-family-{sans|serif|mono})instead of verbatim copies (fixes the--font-family-codeMenlo divergence).var(--body-family)atlegacy.css:1010,1020→var(--font-family-body).varLib.instancer+pyftsubset) documented instatic/fonts/README.md. Italics not shipped; browsers synthesize an oblique.Verified
npm run lintclean;npx jest469/469; tokens.css still under budget.document.fontsshows both familiesloaded; work-page<h1>renders Literata, body renders Inter.Before / after
Rollback = revert the token/head.html changes (fonts are additive files).
🤖 Generated with Claude Code