diff --git a/apps/electron-backend-e2e/src/theme-tokens.e2e.ts b/apps/electron-backend-e2e/src/theme-tokens.e2e.ts
index ffa1e4006..9c18a3147 100644
--- a/apps/electron-backend-e2e/src/theme-tokens.e2e.ts
+++ b/apps/electron-backend-e2e/src/theme-tokens.e2e.ts
@@ -126,6 +126,31 @@ test.describe('Theme tokens', () => {
                     }),
                     `floated label size in ${theme} theme`
                 ).toBeGreaterThanOrEqual(11);
+
+                // The typography tokens carry the font stack through
+                // --app-font-family. A dangling var() voids the whole `font`
+                // shorthand; body text would still inherit the same family,
+                // so check the token's own size and weight.
+                expect(
+                    await page.evaluate(() => {
+                        const probe = document.createElement('span');
+                        probe.style.font = 'var(--mat-sys-label-small)';
+                        document.body.appendChild(probe);
+                        const style = getComputedStyle(probe);
+                        const font = {
+                            family: style.fontFamily,
+                            size: Math.round(parseFloat(style.fontSize)),
+                            weight: style.fontWeight,
+                        };
+                        probe.remove();
+                        return font;
+                    }),
+                    `label-small typography in ${theme} theme`
+                ).toEqual({
+                    family: expect.stringMatching(/^"?DM Sans"?,/),
+                    size: 11,
+                    weight: '500',
+                });
             }
             expect(surfaces['light']).not.toBe(surfaces['dark']);
         } finally {
diff --git a/apps/web/src/m3-theme.scss b/apps/web/src/m3-theme.scss
index 90cf70856..e5190fc8a 100644
--- a/apps/web/src/m3-theme.scss
+++ b/apps/web/src/m3-theme.scss
@@ -6,8 +6,16 @@
 @include mat.app-background();
 
 // ─── Typography ─────────────────────────────────────────────────────────────
-$app-font-stack:
+// The stack is declared once on html; every Material typography token and the
+// typography hierarchy read it through the variable. Inlined, the 103-char
+// stack was copied into ~90 declarations (about 7 KB of the initial CSS).
+$app-font-stack-value:
     "'DM Sans', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif";
+$app-font-stack: var(--app-font-family);
+
+html {
+    --app-font-family: #{$app-font-stack-value};
+}
 
 $my-typography: mat.m2-define-typography-config(
     $font-family: $app-font-stack,
diff --git a/tools/performance/journey-baselines.json b/tools/performance/journey-baselines.json
index 6cbf4e063..56c319574 100644
--- a/tools/performance/journey-baselines.json
+++ b/tools/performance/journey-baselines.json
@@ -3,7 +3,7 @@
     "journeys": {
         "launch": {
             "renderer.initialBytes": {
-                "value": 1611987,
+                "value": 1605046,
                 "unit": "bytes",
                 "slack": 4096,
                 "updatedAt": "2026-10-01",