Security Fix: Self-host fonts to eliminate missing SRI vulnerability

[ysdede]

🔒 Security Fix: Self-host fonts to eliminate missing SRI vulnerability

• 🎯 What: Replaced Google Fonts CDN links with self-hosted @fontsource-variable packages for Manrope, JetBrains Mono, and Material Symbols.
• ⚠️ Risk: Loading fonts from a third-party CDN without Subresource Integrity (SRI) exposes the application to potential CSS injection attacks if the CDN is compromised or traffic is intercepted. Google Fonts does not support SRI for CSS requests due to dynamic content based on User-Agent.
• 🛡️ Solution: Installed npm packages (@fontsource-variable/manrope, @fontsource-variable/jetbrains-mono, @fontsource-variable/material-symbols-outlined) to bundle fonts with the application. Updated src/index.tsx, src/index.css, and src/components/BufferVisualizer.tsx to use the local font files and correct variable font family names. This ensures all assets are served from the same origin and are covered by the application's integrity checks.
• Verified: Verified visually that fonts load correctly using a Playwright script. Build passes. Tests pass (except known flake in TenVADWorkerClient).

---

PR created automatically by Jules for task 8116310505920922195 started by @ysdede

[ysdede]

Review Summary (Post r1→master merge)

Status: ✅ MERGEABLE

Changes: Self-hosts Google Fonts (Manrope, JetBrains Mono, Material Symbols) via @fontsource-variable packages instead of loading from Google CDN. Updates:

• index.html: Removes tags to fonts.googleapis.com
• package.json: Adds 3 @fontsource-variable deps
• src/index.tsx: Imports font CSS
• src/index.css: Updates font-family names to Variable variants
• BufferVisualizer.tsx: Updates canvas font references

Assessment: Important security/privacy improvement. Eliminates external font CDN dependency which:

1. Removes a CSP violation vector
2. Supports offline-first architecture (fonts bundled)
3. Aligns with 'your voice stays on your device' privacy stance
4. Fixes SRI (Subresource Integrity) vulnerability

Font-family names change to 'Manrope Variable', 'JetBrains Mono Variable', 'Material Symbols Outlined Variable' — verify all CSS and canvas code references are updated.

Recommendation: ✅ Merge — Good security and privacy improvement, aligns with project values

[google-labs-jules]

Review Summary (Post r1→master merge)

Status: ✅ MERGEABLE

Changes: Self-hosts Google Fonts (Manrope, JetBrains Mono, Material Symbols) via @fontsource-variable packages instead of loading from Google CDN. Updates:

• index.html: Removes tags to fonts.googleapis.com
• package.json: Adds 3 @fontsource-variable deps
• src/index.tsx: Imports font CSS
• src/index.css: Updates font-family names to Variable variants
• BufferVisualizer.tsx: Updates canvas font references

Assessment: Important security/privacy improvement. Eliminates external font CDN dependency which:

1. Removes a CSP violation vector
2. Supports offline-first architecture (fonts bundled)
3. Aligns with 'your voice stays on your device' privacy stance
4. Fixes SRI (Subresource Integrity) vulnerability

Font-family names change to 'Manrope Variable', 'JetBrains Mono Variable', 'Material Symbols Outlined Variable' — verify all CSS and canvas code references are updated.

Recommendation: ✅ Merge — Good security and privacy improvement, aligns with project values

Thank you for the review. I have verified that all CSS and canvas code references were updated to use the new variable font family names ('Manrope Variable', 'JetBrains Mono Variable', 'Material Symbols Outlined Variable'). I also visually confirmed the fonts are loading correctly via a Playwright script.