Skip to content

fix: serve fonts from static/fonts/ to fix CSP violation#23

Merged
tbjers merged 2 commits into
mainfrom
fix/self-host-fonts-static-dir
Jun 26, 2026
Merged

fix: serve fonts from static/fonts/ to fix CSP violation#23
tbjers merged 2 commits into
mainfrom
fix/self-host-fonts-static-dir

Conversation

@tbjers

@tbjers tbjers commented Jun 26, 2026

Copy link
Copy Markdown
Contributor

Summary

  • @fontsource CSS imports caused Vite to embed font files as Base64 data URIs in the JS bundle; font-src 'self' does not cover data: URIs, so every font load was blocked
  • Replaces the npm package CSS imports with explicit @font-face declarations in app.css pointing to /fonts/*.woff2 (absolute, same-origin paths)
  • Copies the 7 Latin-subset woff2 files (Inter 400/500/600/700 + JetBrains Mono 500/600/700) to dashboard/static/fonts/ so they ship as plain static assets
  • Removes @fontsource/inter and @fontsource/jetbrains-mono from package.json — no longer needed
  • Font payload drops from 80+ hashed files (~5 MB) to 7 stable files (~158 KB)

Test plan

  • Deploy and verify Inter and JetBrains Mono load without CSP violations in browser console
  • Confirm /fonts/inter-400.woff2 (and siblings) return 200 from the deployed Worker
  • Confirm no data: font-src violations appear in DevTools → Console after a hard refresh

🤖 Generated with Claude Code

tbjers and others added 2 commits June 26, 2026 18:36
The themed redesign added self-hosted @fontsource fonts via @font-face
declarations. Without an explicit font-src directive the browser falls
back to default-src and blocks the woff2 files even though they are
served from 'self'. Adding font-src 'self' to _headers unblocks them.

Also adds +error.svelte so SvelteKit error states (e.g. API auth
failures) render inside the root layout with the correct 24px horizontal
padding and theme-aware colours, rather than falling through to the bare
default error page.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@fontsource CSS imports caused Vite to embed font files as Base64 data
URIs in the JS bundle, which are blocked by font-src 'self'. Replaces
the npm package imports with custom @font-face declarations referencing
woff2 files copied to static/fonts/ — served as plain same-origin
assets at /fonts/*.woff2. Drops @fontsource/inter and
@fontsource/jetbrains-mono from package.json; latin-only subset reduces
the font payload from 80+ files to 7.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@tbjers tbjers merged commit 0c9a368 into main Jun 26, 2026
5 checks passed
@tbjers tbjers deleted the fix/self-host-fonts-static-dir branch June 26, 2026 22:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant