fix(web): self-host fonts to resolve CSP connect-src violation#389
Conversation
The service worker fetched Google Fonts (StaleWhileRevalidate on the CSS, CacheFirst on the woff2), and fetch() is governed by connect-src, which did not list fonts.googleapis.com/fonts.gstatic.com. The page rendered fine (the <link> stylesheet is governed by style-src, which did allow them), but the SW fetch was blocked in production, spamming the console and breaking offline font caching. Self-host the fonts instead of widening the CSP: - Add 6 woff2 (Tinos 400/700, Plus Jakarta Sans 400/500/600/700; latin + latin-ext) under public/fonts, declared via @font-face in index.css. - Replace the Google <link>/preconnect with same-origin preloads of the two above-the-fold weights. - Drop the two google-fonts workbox runtime-caching rules; the woff2 globPattern already precaches the self-hosted files. - Remove all Google Fonts hosts from the CSP (now same-origin under 'self'). - Update the SEO e2e test to assert the self-hosted preloads. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
More reviews will be available in 33 minutes and 47 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (6)
📒 Files selected for processing (5)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
🎨 Design-surface change detected This PR touches files mirrored by the Inkweave design system project. What changed:
To refresh: open the design system Claude project and prompt:
This is a reminder, not a blocker. Configured in |
![codescene-delta-analysis[bot]](https://avatars.githubusercontent.com/in/53921?s=60&v=4){kind=small}
There was a problem hiding this comment.
Our agent can fix these. Install it.
Gates Passed
Quality Gate Profile: Pay Down Tech Debt
Install CodeScene MCP: safeguard and uplift AI-generated code. Catch issues early with our IDE extension and CLI tool.
size-limit report 📦
|
⚡ Lighthouse Results
Median of 3 runs. 🟢 ≤75% of limit · 🟠 within limit · 🔴 over limit · 🚫 merge-blocking · |
1 participant
Problem
In production the service worker logged a CSP violation on every load:
Root cause: a CSP directive mismatch. The Google Fonts
<link rel="stylesheet">loads fine because a stylesheet load is governed bystyle-src(which listedfonts.googleapis.com). But the workbox service worker re-fetches that same URL viafetch()to cache it, andfetch()is governed byconnect-src(which did not). Same URL, two different directives. The page rendered correctly, but the SW fetch was blocked: console noise plus no offline font caching.Fix
Self-host the fonts instead of widening the CSP, removing the last external runtime fetch entirely (card images are already self-hosted).
woff2(Tinos 400/700, Plus Jakarta Sans 400/500/600/700;latin+latin-extsubsets) underapps/web/public/fonts/, declared via@font-faceinindex.css(font-display: swap).<link>/preconnectwith same-originpreloads of the two above-the-fold weights.google-fonts-*workbox runtime-caching rules; the existingwoff2globPatternalready precaches the self-hosted files (verified: all 6 in the build's precache manifest).'self'.Verification
200 font/woff2; every weight fetches and decodes (document.fonts.load). Page renders in Plus Jakarta Sans, zero font/CSP console errors.dist/fonts/and in the workbox precache manifest; no Google Fonts references remain insw.js/workbox-*.js.Note: design-system mirror
This changes
apps/web/index.htmlfont imports (Google<link>→ self-hosted@font-face), a design-system-tracked file. The design-system project should be refreshed for the font-loading change.