Self-host fonts and inline global CSS to cut render-blocking#27
Merged
Conversation
Lighthouse flagged two render-blocking requests on the critical path: the cross-origin Google Fonts stylesheet (~750ms) and the first-party global stylesheet (~6KB, ~160ms). Self-host Inter and Playfair Display via Astro's Fonts API. They are now downloaded, subset to latin, and served from /_astro/fonts (bypassing the Worker). The <Font> component inlines @font-face CSS and preloads the font bytes instead of waiting on a cross-origin stylesheet, and generates metric-matched fallbacks that also reduce CLS. Inline the small global stylesheet (build.inlineStylesheets: "always") so it no longer emits a render-blocking <link>; pages are SSR'd per request, so there is no shared-cache benefit lost. Verified in rendered HTML: zero googleapis/gstatic references, zero external stylesheet links, font @font-face/preloads all point to same-origin /_astro/fonts/*.woff2. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
decipher-ms | 17747f1 | Commit Preview URL Branch Preview URL |
May 29 2026, 03:34 PM |
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.
Lighthouse flagged two render-blocking requests on the critical path (~1,630ms est. savings):
fonts.googleapis.com/css2?family=…/_astro/Layout.*.cssFix
latin, and served from/_astro/fonts/*.woff2(static assets, bypass the Worker). The<Font>component inlines@font-faceand preloads the font bytes instead of waiting on a cross-origin CSS round-trip. Generated metric-matched fallbacks also cut CLS during swap.build.inlineStylesheets: "always") — no more render-blocking<link>. Pages are SSR'd per request, so there's no shared-cache benefit lost.--font-sans/--font-serifnow resolve to the self-hosted families; no component changes needed (all use thefont-sans/font-serifutilities).Verified in rendered HTML
googleapis/gstaticreferences: 0<link rel="stylesheet">: 0@font-faceall →/_astro/fonts/*.woff2Caveat
Self-hosted fonts require network at build time (CI fetches from Google once). The Cloudflare build has this; flagging only in case of a future air-gapped build env.
🤖 Generated with Claude Code