fix(ui): load Satoshi from a CDN that actually serves it

crates/hypercolor-app/tauri.conf.json

@@ -9,7 +9,7 @@
     "windows": [],
     "withGlobalTauri": true,
     "security": {
-      "csp": "default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; connect-src 'self' ipc: http://ipc.localhost http: https: ws: wss:; img-src 'self' data: blob: http: https:; media-src 'self' data: blob: http: https:; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' https://fonts.bunny.net; font-src 'self' data: https://fonts.bunny.net; object-src 'none'; base-uri 'none'; frame-src 'none'; frame-ancestors 'none'; form-action 'none'"
+      "csp": "default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; connect-src 'self' ipc: http://ipc.localhost http: https: ws: wss:; img-src 'self' data: blob: http: https:; media-src 'self' data: blob: http: https:; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' https://fonts.bunny.net https://api.fontshare.com; font-src 'self' data: https://fonts.bunny.net https://cdn.fontshare.com; object-src 'none'; base-uri 'none'; frame-src 'none'; frame-ancestors 'none'; form-action 'none'"
     }
   },
   "bundle": {

crates/hypercolor-app/tauri.macos.conf.json

@@ -1,7 +1,7 @@
 {
   "app": {
     "security": {
-      "csp": "default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; connect-src 'self' ipc: http://ipc.localhost http://127.0.0.1:* http://localhost:* http://[::1]:* https://127.0.0.1:* https://localhost:* https://[::1]:* ws://127.0.0.1:* ws://localhost:* ws://[::1]:* wss://127.0.0.1:* wss://localhost:* wss://[::1]:*; img-src 'self' data: blob: http://127.0.0.1:* http://localhost:* http://[::1]:* https://127.0.0.1:* https://localhost:* https://[::1]:*; media-src 'self' data: blob: http://127.0.0.1:* http://localhost:* http://[::1]:* https://127.0.0.1:* https://localhost:* https://[::1]:*; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' https://fonts.bunny.net; font-src 'self' data: https://fonts.bunny.net; object-src 'none'; base-uri 'none'; frame-src 'none'; frame-ancestors 'none'; form-action 'none'"
+      "csp": "default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; connect-src 'self' ipc: http://ipc.localhost http://127.0.0.1:* http://localhost:* http://[::1]:* https://127.0.0.1:* https://localhost:* https://[::1]:* ws://127.0.0.1:* ws://localhost:* ws://[::1]:* wss://127.0.0.1:* wss://localhost:* wss://[::1]:*; img-src 'self' data: blob: http://127.0.0.1:* http://localhost:* http://[::1]:* https://127.0.0.1:* https://localhost:* https://[::1]:*; media-src 'self' data: blob: http://127.0.0.1:* http://localhost:* http://[::1]:* https://127.0.0.1:* https://localhost:* https://[::1]:*; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' https://fonts.bunny.net https://api.fontshare.com; font-src 'self' data: https://fonts.bunny.net https://cdn.fontshare.com; object-src 'none'; base-uri 'none'; frame-src 'none'; frame-ancestors 'none'; form-action 'none'"
     }
   }
 }

crates/hypercolor-app/tests/packaging_tests.rs

@@ -236,11 +236,21 @@ fn bundled_origin_csp_is_exact_and_macos_network_access_is_loopback_only() {
         assert_eq!(directives["worker-src"], csp_sources(&["'self'", "blob:"]));
         assert_eq!(
             directives["style-src"],
-            csp_sources(&["'self'", "'unsafe-inline'", "https://fonts.bunny.net"])
+            csp_sources(&[
+                "'self'",
+                "'unsafe-inline'",
+                "https://fonts.bunny.net",
+                "https://api.fontshare.com"
+            ])
         );
         assert_eq!(
             directives["font-src"],
-            csp_sources(&["'self'", "data:", "https://fonts.bunny.net"])
+            csp_sources(&[
+                "'self'",
+                "data:",
+                "https://fonts.bunny.net",
+                "https://cdn.fontshare.com"
+            ])
         );
         for denied in [
             "object-src",

crates/hypercolor-ui/index.html

@@ -30,7 +30,10 @@
     <link data-trunk rel="rust" data-wasm-opt="z" />
     <link data-trunk rel="copy-dir" href="assets" />
     <link rel="preconnect" href="https://fonts.bunny.net" />
-    <link href="https://fonts.bunny.net/css?family=satoshi:400,500,600,700|jetbrains-mono:400,500,600,400i|sora:400,500,600" rel="stylesheet" />
+    <link rel="preconnect" href="https://api.fontshare.com" />
+    <link rel="preconnect" href="https://cdn.fontshare.com" crossorigin />
+    <link href="https://api.fontshare.com/v2/css?f[]=satoshi@1,2&display=swap" rel="stylesheet" />
+    <link href="https://fonts.bunny.net/css?family=jetbrains-mono:400,500,600,400i|sora:400,500,600" rel="stylesheet" />
     <script>
         // Restore explicit theme preference before first paint; default stays dark.
         (function() {

docs/DESIGN-SYSTEM.md

@@ -316,8 +316,9 @@ colors, every session: identity without a stored palette.
 than Inter, tighter metrics, and an excellent weight range. It reads as
 *designed*. **JetBrains Mono** carries every number, metric, hex value, and code
 fragment. **Sora** is the display face and does one job, the page title (§5.2).
-All three load from Bunny Fonts (privacy-respecting, no Google tracking), and
-they are the only faces the app fetches.
+Satoshi loads from Fontshare and the other two from Bunny Fonts (both
+privacy-respecting, no Google tracking); they are the only faces the app
+fetches.
 
 The root is set to `font-size: 112.5%` (an 18px base), so `1rem` is 18px. Body
 text runs `letter-spacing: -0.01em` with `line-height: 1.5`; headings tighten to
@@ -345,10 +346,14 @@ The shipped page title is `.page-title`: 21px, weight 500, +0.02em, in Sora
 
 ### 5.2 Display Faces
 
-Exactly three families load, all from Bunny Fonts in `index.html`: **Satoshi**
-(400/500/600/700), **JetBrains Mono** (400/500/600 plus 400 italic), and
-**Sora** (400/500/600). Nothing else is fetched, so any face named in a stack
-without one of those three behind it silently falls back.
+Exactly three families load in `index.html`: **Satoshi** (the variable
+face, weight axis 300 to 900, upright and italic, from Fontshare, which is the
+only CDN that carries it; Bunny Fonts does not, and a request there returns no
+faces), **JetBrains Mono** (400/500/600 plus 400 italic, from Bunny), and
+**Sora** (400/500/600, from Bunny). Nothing else is fetched, so any face named
+in a stack without one of those three behind it silently falls back. Because
+Satoshi is variable, every weight the type scale asks for (including 600)
+renders as a true instance rather than a synthesized one.
 
 **Sora** is the display face, and it has exactly one job: `.page-title` in
 `input.css`, at 21px, weight 500, +0.02em tracking, with an accent-forward

docs/content/theme/_index.md

@@ -31,9 +31,9 @@ components.
 
 In practice that means:
 
-- The same **typeface stack**: Satoshi (sans and display) and JetBrains Mono
-  (code), loaded via Bunny Fonts (`fonts.bunny.net`), the same origin the app
-  uses. `--font-display` resolves to Satoshi. The app's request also pulls Sora;
+- The same **typeface stack**: Satoshi (sans and display) from Fontshare and
+  JetBrains Mono (code) from Bunny Fonts (`fonts.bunny.net`), the same origins
+  the app uses. `--font-display` resolves to Satoshi. The app's request also pulls Sora;
   the docs request does not, since Sora has no mapped docs token.
 - The same **OKLCH color vocabulary**: `--accent` is `oklch(0.65 0.30 320)`
   (electric purple); surfaces and text ride a low-chroma hue-280 neutral ramp
@@ -68,7 +68,7 @@ carried over?
 
 | Element | Status | Notes |
 |---|---|---|
-| Satoshi + JetBrains Mono via `fonts.bunny.net` | **Keep** | Same CDN as the app; no Google Fonts, no Inter |
+| Satoshi via Fontshare, JetBrains Mono via `fonts.bunny.net` | **Keep** | Same CDNs as the app; no Google Fonts, no Inter |
 | OKLCH semantic token names (`--surface-base`, `--accent`, `--text-secondary`, etc.) | **Keep** | Same intent; docs Sass maintains its own values in `_variables.scss` |
 | Purple-only chrome accent (`oklch(0.65 0.30 320)`) | **Keep** | Hard rule; cyan/coral/green are not UI chrome |
 | Cyan focus rings only (`oklch(0.88 0.18 175)` in dark, purple in light) | **Keep** | Interactive focus indicator, never decoration |
@@ -95,7 +95,10 @@ Fonts load from Bunny Fonts, the same privacy-respecting CDN the app uses. The
 
 ```html
 <link rel="preconnect" href="https://fonts.bunny.net">
-<link href="https://fonts.bunny.net/css?family=satoshi:400,500,600,700|jetbrains-mono:400,500,600,400i" rel="stylesheet">
+<link rel="preconnect" href="https://api.fontshare.com">
+<link rel="preconnect" href="https://cdn.fontshare.com" crossorigin>
+<link href="https://api.fontshare.com/v2/css?f[]=satoshi@1,2&display=swap" rel="stylesheet">
+<link href="https://fonts.bunny.net/css?family=jetbrains-mono:400,500,600,400i" rel="stylesheet">
 ```
 
 The app's request in `crates/hypercolor-ui/index.html` additionally pulls

docs/templates/base.html

@@ -33,9 +33,12 @@
   <meta name="twitter:image" content="{{ get_url(path='img/brand/lockup-horizontal-480.png') }}">
   <meta name="twitter:image:alt" content="Hypercolor">
 
-  <!-- Fonts — Satoshi + JetBrains Mono via Bunny (the app's exact source) -->
+  <!-- Fonts: Satoshi from Fontshare, JetBrains Mono from Bunny (the app's exact sources) -->
   <link rel="preconnect" href="https://fonts.bunny.net">
-  <link href="https://fonts.bunny.net/css?family=satoshi:400,500,600,700|jetbrains-mono:400,500,600,400i" rel="stylesheet">
+  <link rel="preconnect" href="https://api.fontshare.com">
+  <link rel="preconnect" href="https://cdn.fontshare.com" crossorigin>
+  <link href="https://api.fontshare.com/v2/css?f[]=satoshi@1,2&display=swap" rel="stylesheet">
+  <link href="https://fonts.bunny.net/css?family=jetbrains-mono:400,500,600,400i" rel="stylesheet">
 
   <!-- Styles -->
   <link rel="stylesheet" href="{{ get_url(path='silkcircuit.css') }}">