diff --git a/kez-chat/web/index.html b/kez-chat/web/index.html
index 87d855b..fad9c0d 100644
--- a/kez-chat/web/index.html
+++ b/kez-chat/web/index.html
@@ -7,6 +7,12 @@
   <title>kez-chat</title>
   <meta name="description" content="End-to-end encrypted chat on top of KEZ — portable cross-app identity." />
 
+  <!-- Fonts: Inter (UI) + JetBrains Mono (keys/handles/wordmark). Loaded
+       here, not via CSS @import — see app.css note. -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap" />
+
   <!-- Browser tab + Android Chrome favicon -->
   <link rel="icon" href="/favicon.ico" sizes="48x48" />
   <link rel="icon" type="image/svg+xml" href="/kez-icon.svg" />
diff --git a/kez-chat/web/src/app.css b/kez-chat/web/src/app.css
index c927942..7ca8b05 100644
--- a/kez-chat/web/src/app.css
+++ b/kez-chat/web/src/app.css
@@ -1,13 +1,12 @@
 @import "tailwindcss";
 
-/* Fonts: Inter (UI) + JetBrains Mono (keys/handles/wordmark). */
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap");
-
-/* ───────────────────────────────────────────────────────────────────────────
-   KEZ design tokens — see DESIGN.md. Dark-first, "muted tactical terminal."
-   Tailwind v4 turns each --color-* into bg-*/text-*/border-* utilities,
-   each --font-* into font-*, each --radius-* into rounded-*.
-   ─────────────────────────────────────────────────────────────────────────── */
+/* KEZ design tokens (see DESIGN.md). Dark-first, "muted tactical terminal."
+   Tailwind v4 turns each --color-* into bg-/text-/border- utilities, each
+   --font-* into font-*, each --radius-* into rounded-*.
+   NOTE: keep this @theme block free of fancy unicode comments and do NOT
+   put a CSS `@import url()` before it — either one stops Tailwind from
+   transforming @theme, and Lightning CSS then drops the whole block.
+   Fonts load via <link> in index.html for that reason. */
 @theme {
   /* Elevation ramp (neutral near-black) */
   --color-bg: #0b0c0e;