diff --git a/secubox-companion/www/index.html b/secubox-companion/www/index.html
index 3710af0e..df9ed0ce 100644
--- a/secubox-companion/www/index.html
+++ b/secubox-companion/www/index.html
@@ -12,6 +12,7 @@
+
diff --git a/secubox-companion/www/styles/charte.css b/secubox-companion/www/styles/charte.css
index ea688ebe..e518ae74 100644
--- a/secubox-companion/www/styles/charte.css
+++ b/secubox-companion/www/styles/charte.css
@@ -1,9 +1,8 @@
/* SPDX-License-Identifier: LicenseRef-CMSD-1.0 */
/* SecuBox Companion — SecuBox_Charte_Light_3
- * Fonts are referenced by family name with self-contained fallback stacks
- * (no external font CDN — the app talks only to the box). Bundle the real
- * Space Grotesk / JetBrains Mono woff2 into styles/fonts/ to pixel-match.
- * TODO(fonts): drop woff2 + @font-face here for exact charte rendering.
+ * Charte fonts (Space Grotesk + JetBrains Mono) are self-hosted latin woff2,
+ * declared in styles/fonts.css — no external font CDN, fully offline. The
+ * family names below resolve to those @font-face rules, with system fallbacks.
*/
:root {
--font-ui: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
diff --git a/secubox-companion/www/styles/fonts.css b/secubox-companion/www/styles/fonts.css
new file mode 100644
index 00000000..261e17a3
--- /dev/null
+++ b/secubox-companion/www/styles/fonts.css
@@ -0,0 +1,8 @@
+/* SPDX-License-Identifier: LicenseRef-CMSD-1.0 */
+/* SecuBox Companion — bundled charte fonts (latin, self-hosted; no external CDN).
+ Space Grotesk (UI/titles) + JetBrains Mono (data/code). SIL Open Font License. */
+@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/space-grotesk-400.woff2') format('woff2'); }
+@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/space-grotesk-500.woff2') format('woff2'); }
+@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/space-grotesk-700.woff2') format('woff2'); }
+@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/jetbrains-mono-400.woff2') format('woff2'); }
+@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/jetbrains-mono-700.woff2') format('woff2'); }
diff --git a/secubox-companion/www/styles/fonts/jetbrains-mono-400.woff2 b/secubox-companion/www/styles/fonts/jetbrains-mono-400.woff2
new file mode 100644
index 00000000..4d09cda4
Binary files /dev/null and b/secubox-companion/www/styles/fonts/jetbrains-mono-400.woff2 differ
diff --git a/secubox-companion/www/styles/fonts/jetbrains-mono-700.woff2 b/secubox-companion/www/styles/fonts/jetbrains-mono-700.woff2
new file mode 100644
index 00000000..4d09cda4
Binary files /dev/null and b/secubox-companion/www/styles/fonts/jetbrains-mono-700.woff2 differ
diff --git a/secubox-companion/www/styles/fonts/space-grotesk-400.woff2 b/secubox-companion/www/styles/fonts/space-grotesk-400.woff2
new file mode 100644
index 00000000..0f3474ee
Binary files /dev/null and b/secubox-companion/www/styles/fonts/space-grotesk-400.woff2 differ
diff --git a/secubox-companion/www/styles/fonts/space-grotesk-500.woff2 b/secubox-companion/www/styles/fonts/space-grotesk-500.woff2
new file mode 100644
index 00000000..0f3474ee
Binary files /dev/null and b/secubox-companion/www/styles/fonts/space-grotesk-500.woff2 differ
diff --git a/secubox-companion/www/styles/fonts/space-grotesk-700.woff2 b/secubox-companion/www/styles/fonts/space-grotesk-700.woff2
new file mode 100644
index 00000000..0f3474ee
Binary files /dev/null and b/secubox-companion/www/styles/fonts/space-grotesk-700.woff2 differ
diff --git a/secubox-companion/www/sw.js b/secubox-companion/www/sw.js
index cd177321..87200f3a 100644
--- a/secubox-companion/www/sw.js
+++ b/secubox-companion/www/sw.js
@@ -10,7 +10,10 @@
const VERSION = 'sbx-companion-v1';
const SHELL = [
'./', './index.html', './manifest.webmanifest',
- './styles/charte.css',
+ './styles/charte.css', './styles/fonts.css',
+ './styles/fonts/space-grotesk-400.woff2', './styles/fonts/space-grotesk-500.woff2',
+ './styles/fonts/space-grotesk-700.woff2', './styles/fonts/jetbrains-mono-400.woff2',
+ './styles/fonts/jetbrains-mono-700.woff2',
'./core/app.js', './core/api.js', './core/store.js',
'./core/registry.js', './core/auth.js', './core/ui.js',
'./modules/index.json',