Self-host default fonts and inline only the ones a site uses (RND-12524) - #4522
Draft
nolannbiron wants to merge 3 commits into
Draft
Self-host default fonts and inline only the ones a site uses (RND-12524)#4522nolannbiron wants to merge 3 commits into
nolannbiron wants to merge 3 commits into
Conversation
`src/fonts/default.ts` instantiated 23 `next/font` families in one module, so the 507 `@font-face` rules for all of them shipped to every page across two or three render-blocking stylesheets (195 KB) — for the two families a site actually uses. Resolve the faces from the Google Fonts CSS API at generate time, vendor the woff2 files under `~gitbook/static/fonts`, and inline the picked families' rules in the head, reusing the path custom fonts already took. The generated data reproduces next/font's 491 faces and all 16 metric-adjusted fallback faces exactly, so rendering and CLS are unchanged. Published pages are now down to a single render-blocking stylesheet, plus ~3 KB compressed of inline font rules. Builds also no longer depend on Google Fonts.
The unicode-ranges were repeated identically on every weight of a family, and sources.json held 220 full URLs where 24 per-family prefixes cover them. 226 KB -> 106 KB committed, and the runtime JSON that ends up in the server bundle drops from 190 KB to 90 KB. The emitted faces are unchanged: same 491 faces, same fallback faces, same CSS variable values.
🦋 Changeset detectedLatest commit: 4149e1a The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
Contributor
Style invalidation on a large API referenceElements restyled by opening one popup on the Snyk API reference. A share near or above 100% means the insertion restyles the whole document.
|
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.
Supersedes #4519, rebased standalone on
main(no longer stacked on #4518, which measured no paint improvement on its own and stays closed).Every page currently ships 3 render-blocking stylesheets containing 507
@font-facerules for all 23 default font families, while a site uses at most two. On production (cross-originstatic-2v.gitbook.com), the font CSS → woff2 chain is the largest render-blocking item Lighthouse reports (794 ms of ~1,300 ms onmariadb.com/docs), gating the text LCP element.Changes:
scripts/generate-font-faces.tsgenerates a per-family manifest from the Google Fonts CSS API (same UA as next/font — byte-identical faces, verified 491/491), committed assrc/fonts/generated/scripts/download-fonts.ts(wired intogenerate:assets) downloads the woff2 files topublic/~gitbook/static/fonts/, served first-party viagetAssetURLsrc/fonts/default.tsreplaces the 23next/font/googlecalls with the generated manifest;CustomizationRootLayoutinlines the@font-facerules for the site's content + mono fonts and emoji onlysize-adjust/ascent-override) preserved vianext/dist/server/font-utils, so no CLS regressionMeasured on preview (
/url/mariadb.com/docs): Lighthouse's modeled render-blocking savings drop from 400–500 ms (baseline, n=13) to 160–330 ms (n=7). Same-origin previews cannot reproduce the production topology, where the removed font-CSS → woff2 chain is the largest render-blocking item (794 ms of ~1,300 ms); production impact to be measured after merge.Note: font assets 404 on aliased
*.workers.devpreview hosts becausegetAssetURLresolves against the deployment's configuredGITBOOK_URL— same as existing generated assets (icons, math, scalar); validate on the Vercel preview or the canonical 2c preview URL.