How to migrating a marketing site off google fonts cdn
- Step 1Audit current Google Fonts usage — Grep for fonts.googleapis.com across your codebase. Inventory every family, weight, and italic variant in production. Note the exact CSS API URL — the JAD generator will reproduce it byte-for-byte for self-hosting.
- Step 2Generate self-hostable CSS — Run the JAD generator with the exact URL. Save the output to /public/fonts/google-fonts.css. Run the curl script to fetch every WOFF2 to /public/fonts/woff2/. Commit both.
- Step 3Switch behind a feature flag — Add a GROWTHBOOK or LaunchDarkly flag that toggles between the Google CDN and the self-hosted CSS. Deploy with the flag off (no behavioural change). Toggle on for 1% of traffic, monitor Core Web Vitals, ramp to 100% over 24 hours.
Frequently asked questions
How do I run visual regression tests?+
Tools like Percy, Chromatic, or Playwright snapshot tests catch font rendering differences. Self-hosted Google Fonts should produce pixel-identical output — any regression is a misconfigured src list or missing WOFF2.
What if the migration breaks SEO?+
Self-hosting improves Core Web Vitals, which is a positive ranking signal. The risk is a misconfigured @font-face that fails silently (font doesn't load → text in fallback font). Visual regression tests catch this before deploy.
Should I keep the Google CDN as a fallback?+
Defeats the purpose — defaults to Google if your CDN fails, leaking IPs again. If your CDN is reliable enough to serve HTML, it's reliable enough to serve fonts. Trust your stack and remove the fallback.
What's a typical timeline?+
Small marketing site: 2 days (audit + generate + deploy). Large multi-domain content site: 1–2 sprints. The complexity scales with the number of font references, not the traffic volume.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.