diff --git a/ui/src/components/dock-layout-controller.ts b/ui/src/components/dock-layout-controller.ts
index 1fc1852c0d16..f336fa2dd4a9 100644
--- a/ui/src/components/dock-layout-controller.ts
+++ b/ui/src/components/dock-layout-controller.ts
@@ -227,7 +227,7 @@ export const dockPanelStyles = css`
     position: fixed;
     z-index: 60;
     color: var(--text, #d7dae0);
-    font-family: var(--font-sans, system-ui, sans-serif);
+    font-family: var(--font-body);
   }
   :is(.bp, .tp) {
     position: fixed;
diff --git a/ui/src/styles/base-theme-tokens.node.test.ts b/ui/src/styles/base-theme-tokens.node.test.ts
index cef54396e92b..fd789b73a93c 100644
--- a/ui/src/styles/base-theme-tokens.node.test.ts
+++ b/ui/src/styles/base-theme-tokens.node.test.ts
@@ -13,6 +13,11 @@ const undefinedTokenMappings = {
   "bg-subtle": "bg-muted",
   "border-subtle": "border",
   fg: "text",
+  // Font aliases arrive from surfaces that publish their own token names
+  // (canvas widgets, the MCP Apps spec keys in mcp-app-theme.ts); inside
+  // Control UI only --mono and --font-body exist.
+  "font-mono": "mono",
+  "font-sans": "font-body",
   foreground: "text",
   "panel-2": "panel-strong",
   success: "ok",
diff --git a/ui/src/styles/chat/grouped.css b/ui/src/styles/chat/grouped.css
index b75a80808efa..e1599fe03072 100644
--- a/ui/src/styles/chat/grouped.css
+++ b/ui/src/styles/chat/grouped.css
@@ -908,7 +908,7 @@ details.msg-meta:not([open]) .msg-meta__details {
   background: var(--bg-hover, rgba(255, 255, 255, 0.06));
   padding: 1px 6px;
   border-radius: var(--radius-sm, 4px);
-  font-family: var(--font-mono, monospace);
+  font-family: var(--mono);
 }
 
 .msg-meta__cost {
diff --git a/ui/src/styles/chat/layout.css b/ui/src/styles/chat/layout.css
index 6af22a20031e..1106027979ed 100644
--- a/ui/src/styles/chat/layout.css
+++ b/ui/src/styles/chat/layout.css
@@ -1652,7 +1652,7 @@ openclaw-chat-video-player {
   border-radius: 6px;
   background: color-mix(in srgb, var(--bg) 70%, transparent);
   color: var(--text);
-  font: 11px/1.4 var(--font-mono);
+  font: 11px/1.4 var(--mono);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
 }
@@ -1946,7 +1946,7 @@ openclaw-chat-video-player {
   min-width: 0;
   overflow: hidden;
   color: var(--muted);
-  font: 12px/1.4 var(--font-mono);
+  font: 12px/1.4 var(--mono);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -1961,7 +1961,7 @@ openclaw-chat-video-player {
 .chat-pr__diff {
   display: inline-flex;
   gap: 5px;
-  font: 12px/1.4 var(--font-mono);
+  font: 12px/1.4 var(--mono);
 }
 
 .chat-pr__additions {
@@ -5293,7 +5293,7 @@ openclaw-chat-video-player {
   display: inline-block;
   padding: 1px 6px;
   font-size: 12px; /* was 11px */
-  font-family: var(--font-mono);
+  font-family: var(--mono);
   background: var(--panel-strong);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
diff --git a/ui/src/styles/components.css b/ui/src/styles/components.css
index 30ada9a94c8a..8e75f127ae9a 100644
--- a/ui/src/styles/components.css
+++ b/ui/src/styles/components.css
@@ -290,7 +290,7 @@ openclaw-session-owner-chip {
   display: block;
   margin: 4px 0 2px;
   padding: 5px 10px;
-  font-family: var(--font-mono);
+  font-family: var(--mono);
   font-size: 12px;
   background: var(--bg);
   border: 1px solid var(--border);
@@ -1018,7 +1018,7 @@ openclaw-session-owner-chip {
   align-items: center;
   padding: 0 12px;
   color: var(--text);
-  font-family: var(--font-mono);
+  font-family: var(--mono);
   font-size: 13px;
   letter-spacing: 0.08em;
   line-height: 1;
diff --git a/ui/src/styles/custodian-panel.css b/ui/src/styles/custodian-panel.css
index 6764b3d147d7..b129a1d96347 100644
--- a/ui/src/styles/custodian-panel.css
+++ b/ui/src/styles/custodian-panel.css
@@ -2,7 +2,7 @@ openclaw-custodian-panel {
   position: fixed;
   z-index: 60;
   color: var(--text);
-  font-family: var(--font-sans);
+  font-family: var(--font-body);
 }
 
 .cp {
diff --git a/ui/src/styles/layout.css b/ui/src/styles/layout.css
index cf8fb981c802..021eb2fc7068 100644
--- a/ui/src/styles/layout.css
+++ b/ui/src/styles/layout.css
@@ -324,7 +324,7 @@ html.openclaw-native-web-chrome .shell-chrome-controls {
   border-radius: var(--radius-sm);
   background: color-mix(in srgb, var(--card) 70%, transparent);
   color: var(--muted);
-  font-family: var(--font-mono, ui-monospace, monospace);
+  font-family: var(--mono);
   font-size: 10px;
   font-weight: 550;
   letter-spacing: 0.04em;
@@ -3472,7 +3472,7 @@ openclaw-tooltip.sidebar-hover-tooltip {
 }
 
 .sidebar-hover-card__metadata-value--mono {
-  font-family: var(--font-mono);
+  font-family: var(--mono);
   font-size: 11px;
 }
 
@@ -3594,7 +3594,7 @@ wa-dropdown.sidebar-identity-menu::part(menu) {
   min-width: 0;
   overflow: hidden;
   color: var(--muted);
-  font-family: var(--font-mono);
+  font-family: var(--mono);
   font-size: 11px;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -3620,7 +3620,7 @@ wa-dropdown.sidebar-identity-menu::part(menu) {
   border-radius: var(--radius-sm);
   background: color-mix(in srgb, var(--danger) 12%, transparent);
   font-size: 11px;
-  font-family: var(--font-mono);
+  font-family: var(--mono);
   color: var(--danger);
 }
 
diff --git a/ui/src/styles/settings.css b/ui/src/styles/settings.css
index d1213e999028..592f8268b20a 100644
--- a/ui/src/styles/settings.css
+++ b/ui/src/styles/settings.css
@@ -156,7 +156,7 @@
   border-radius: 50%;
   background: transparent;
   color: var(--muted);
-  font: 600 var(--control-ui-text-xs) / 1 var(--font-sans);
+  font: 600 var(--control-ui-text-xs) / 1 var(--font-body);
   cursor: var(--cursor-action);
 }