Serve the fonts ourselves instead of from Google

Loading Google Fonts sends every visitor's IP address to Google before
they have agreed to anything, which EU courts have ruled a GDPR breach.
The three faces now ship in the bundle via @fontsource and are precached
by the service worker, so the pixel type also renders offline, which it
never did before. Rendering is unchanged (compared before and after).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: Kjubikstronk

CLAUDE.md

@@ -63,6 +63,11 @@ Seed on open, not on mount.
 and compare correctly and can't drift by timezone. A date happening *today* is
 not past — use `<`, not `<=`.
 
+**Fonts are self-hosted (`@fontsource`, imported in `main.tsx`).** Never
+re-add the Google Fonts `<link>`: it sends every visitor's IP to Google
+before any consent, which German courts have ruled a GDPR breach. Bundled,
+they are also precached, so the pixel type works offline.
+
 **One service worker only.** `vite-plugin-pwa` owns it. Adding Firebase
 messaging later needs `injectManifest` and a single combined worker, not a
 second file at the same scope.

index.html

@@ -19,12 +19,10 @@
          anyone find it in the first place. -->
     <meta name="robots" content="noindex, nofollow" />
 
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&family=Silkscreen:wght@400;700&family=Space+Grotesk:wght@400;500;700&display=swap"
-      rel="stylesheet"
-    />
+    <!-- No Google Fonts. The faces ship inside the bundle (see src/main.tsx):
+         loading them from Google hands every visitor's IP address to Google
+         before they've agreed to anything, which EU courts have ruled a GDPR
+         breach. It also means the pixel type works offline. -->
 
     <!-- Before first paint, or a phone that chose another theme shows the
          default palette for a frame. Deliberately inline and dependency-free:

package-lock.json

@@ -15,6 +15,9 @@
     "check": "npm run lint && npm run contrast && npm test && npm run build"
   },
   "dependencies": {
+    "@fontsource-variable/pixelify-sans": "^5.3.0",
+    "@fontsource-variable/space-grotesk": "^5.3.0",
+    "@fontsource/silkscreen": "^5.3.0",
     "@vis.gl/react-google-maps": "^1.9.0",
     "date-fns": "^4.4.0",
     "firebase": "^12.16.0",

package.json

@@ -1,5 +1,10 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+// Self-hosted, never fetched from Google — see the note in index.html.
+import '@fontsource-variable/pixelify-sans/wght.css'
+import '@fontsource-variable/space-grotesk/wght.css'
+import '@fontsource/silkscreen/400.css'
+import '@fontsource/silkscreen/700.css'
 import './index.css'
 import App from './App.tsx'
 

src/main.tsx

@@ -52,8 +52,8 @@
   /* Type -----------------------------------------------------
      Pixel faces are unreadable in paragraphs, so the bitmap face is
      rationed: headings, day numbers, buttons. Prose gets a real face. */
-  --font-display: 'Pixelify Sans', ui-monospace, monospace;
-  --font-body: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
+  --font-display: 'Pixelify Sans Variable', ui-monospace, monospace;
+  --font-body: 'Space Grotesk Variable', ui-sans-serif, system-ui, sans-serif;
   --font-util: 'Silkscreen', ui-monospace, monospace;
 
   /* Motion ---------------------------------------------------

src/theme.css

@@ -29,7 +29,9 @@ export default defineConfig({
         'manifest.webmanifest',
       ],
       workbox: {
-        globPatterns: ['**/*.{js,css,html,svg,png,webmanifest}'],
+        // woff2: the fonts are bundled now, and precaching them is what lets
+        // the pixel type render offline.
+        globPatterns: ['**/*.{js,css,html,svg,png,webmanifest,woff2}'],
         navigateFallback: 'index.html',
         cleanupOutdatedCaches: true,
         // Deliberately no runtimeCaching. Firestore keeps its own offline