From f2ab8da60348c59c1f9d53feacc1319f8ba4097f Mon Sep 17 00:00:00 2001
From: spennyp <hello@spencerperkins.me>
Date: Tue, 2 Jun 2026 19:55:30 -0700
Subject: [PATCH] fix(ui): style mono text with --apkt-font-family-mono falling
 back to base font

---
 .changeset/mono-font-family-variable.md    |  7 ++++++
 packages/common/src/utils/ThemeUtil.ts     |  2 ++
 packages/controllers/src/utils/TypeUtil.ts |  2 ++
 packages/ui/src/utils/ThemeHelperUtil.ts   | 18 ++++++++++++++++
 packages/ui/src/utils/TypeUtil.ts          |  2 ++
 packages/ui/tests/ThemeUtil.test.ts        | 25 ++++++++++++++++++++++
 6 files changed, 56 insertions(+)
 create mode 100644 .changeset/mono-font-family-variable.md

diff --git a/.changeset/mono-font-family-variable.md b/.changeset/mono-font-family-variable.md
new file mode 100644
index 0000000000..798d7a4dde
--- /dev/null
+++ b/.changeset/mono-font-family-variable.md
@@ -0,0 +1,7 @@
+---
+'@reown/appkit-ui': patch
+'@reown/appkit-common': patch
+'@reown/appkit-controllers': patch
+---
+
+Fix monospace text (WalletConnect "Copy link", wallet addresses, amount inputs) rendering in the browser default font when a custom `--apkt-font-family` is set. Added a `--apkt-font-family-mono` theme variable that falls back to `--apkt-font-family` when not provided, so a single custom font now styles monospace text too.
diff --git a/packages/common/src/utils/ThemeUtil.ts b/packages/common/src/utils/ThemeUtil.ts
index fb42656631..2ae9a8f110 100644
--- a/packages/common/src/utils/ThemeUtil.ts
+++ b/packages/common/src/utils/ThemeUtil.ts
@@ -3,6 +3,7 @@ export type ThemeType = 'dark' | 'light'
 
 export interface ThemeVariables {
   '--w3m-font-family'?: string
+  '--w3m-font-family-mono'?: string
   '--w3m-accent'?: string
   '--w3m-color-mix'?: string
   '--w3m-color-mix-strength'?: number
@@ -11,6 +12,7 @@ export interface ThemeVariables {
   '--w3m-z-index'?: number
   '--w3m-qr-color'?: string
   '--apkt-font-family'?: string
+  '--apkt-font-family-mono'?: string
   '--apkt-accent'?: string
   '--apkt-color-mix'?: string
   '--apkt-color-mix-strength'?: number
diff --git a/packages/controllers/src/utils/TypeUtil.ts b/packages/controllers/src/utils/TypeUtil.ts
index c23fd8f1c1..b7a12b48de 100644
--- a/packages/controllers/src/utils/TypeUtil.ts
+++ b/packages/controllers/src/utils/TypeUtil.ts
@@ -211,6 +211,7 @@ export type ThemeMode = 'dark' | 'light'
 
 export interface ThemeVariables {
   '--w3m-font-family'?: string
+  '--w3m-font-family-mono'?: string
   '--w3m-accent'?: string
   '--w3m-color-mix'?: string
   '--w3m-color-mix-strength'?: number
@@ -219,6 +220,7 @@ export interface ThemeVariables {
   '--w3m-z-index'?: number
   '--w3m-qr-color'?: string
   '--apkt-font-family'?: string
+  '--apkt-font-family-mono'?: string
   '--apkt-accent'?: string
   '--apkt-color-mix'?: string
   '--apkt-color-mix-strength'?: number
diff --git a/packages/ui/src/utils/ThemeHelperUtil.ts b/packages/ui/src/utils/ThemeHelperUtil.ts
index c73ebcc668..919f027d40 100644
--- a/packages/ui/src/utils/ThemeHelperUtil.ts
+++ b/packages/ui/src/utils/ThemeHelperUtil.ts
@@ -17,6 +17,14 @@ function normalizeThemeVariables(themeVariables?: ThemeVariables): Record<string
   normalized['font-family'] =
     themeVariables['--apkt-font-family'] ?? themeVariables['--w3m-font-family'] ?? 'KHTeka'
 
+  // Fall back to the base font (so one --apkt-font-family styles mono too), then the mono default.
+  normalized['font-family-mono'] =
+    themeVariables['--apkt-font-family-mono'] ??
+    themeVariables['--w3m-font-family-mono'] ??
+    themeVariables['--apkt-font-family'] ??
+    themeVariables['--w3m-font-family'] ??
+    'KHTekaMono'
+
   normalized['accent'] =
     themeVariables['--apkt-accent'] ?? themeVariables['--w3m-accent'] ?? '#0988F0'
 
@@ -183,6 +191,7 @@ export const ThemeHelperUtil = {
 
     // Set default values and user overrides (keep --w3m-* names for backwards compatibility)
     variables['--w3m-font-family'] = normalized['font-family'] as string
+    variables['--w3m-font-family-mono'] = normalized['font-family-mono'] as string
     variables['--w3m-accent'] = normalized['accent'] as string
     variables['--w3m-color-mix'] = normalized['color-mix'] as string
     variables['--w3m-color-mix-strength'] = `${normalized['color-mix-strength']}%`
@@ -216,6 +225,15 @@ export const ThemeHelperUtil = {
       overrides['--apkt-fontFamily-regular'] = normalized['font-family'] as string
     }
 
+    if (
+      themeVariables['--apkt-font-family-mono'] ||
+      themeVariables['--w3m-font-family-mono'] ||
+      themeVariables['--apkt-font-family'] ||
+      themeVariables['--w3m-font-family']
+    ) {
+      overrides['--apkt-fontFamily-mono'] = normalized['font-family-mono'] as string
+    }
+
     if (normalized['z-index'] !== undefined) {
       overrides['--apkt-tokens-core-zIndex'] = `${normalized['z-index']}`
     }
diff --git a/packages/ui/src/utils/TypeUtil.ts b/packages/ui/src/utils/TypeUtil.ts
index 251b434e66..47e8d34123 100644
--- a/packages/ui/src/utils/TypeUtil.ts
+++ b/packages/ui/src/utils/TypeUtil.ts
@@ -376,6 +376,7 @@ export type InputType =
 
 export interface ThemeVariables {
   '--w3m-font-family'?: string
+  '--w3m-font-family-mono'?: string
   '--w3m-accent'?: string
   '--w3m-color-mix'?: string
   '--w3m-color-mix-strength'?: number
@@ -384,6 +385,7 @@ export interface ThemeVariables {
   '--w3m-z-index'?: number
   '--w3m-qr-color'?: string
   '--apkt-font-family'?: string
+  '--apkt-font-family-mono'?: string
   '--apkt-accent'?: string
   '--apkt-color-mix'?: string
   '--apkt-color-mix-strength'?: number
diff --git a/packages/ui/tests/ThemeUtil.test.ts b/packages/ui/tests/ThemeUtil.test.ts
index a86e470883..3d4af7f1c5 100644
--- a/packages/ui/tests/ThemeUtil.test.ts
+++ b/packages/ui/tests/ThemeUtil.test.ts
@@ -52,6 +52,31 @@ describe('ThemeUtil', () => {
       expect(rootStyles).toContain('--apkt-fontFamily-regular:New Font')
     })
 
+    it('should drive the monospace font from --apkt-font-family when no mono font is set', () => {
+      const themeVariables: ThemeVariables = {
+        '--apkt-font-family': 'New Font'
+      }
+      const rootStyles = ThemeHelperUtil.createRootStyles('dark', themeVariables)
+
+      expect(rootStyles).toContain('--apkt-fontFamily-mono:New Font')
+    })
+
+    it('should prioritize --apkt-font-family-mono over --apkt-font-family for monospace text', () => {
+      const themeVariables: ThemeVariables = {
+        '--apkt-font-family': 'New Font',
+        '--apkt-font-family-mono': 'New Mono'
+      }
+      const rootStyles = ThemeHelperUtil.createRootStyles('dark', themeVariables)
+
+      expect(rootStyles).toContain('--apkt-fontFamily-mono:New Mono')
+    })
+
+    it('should default the monospace font to KHTekaMono when no font is provided', () => {
+      const rootStyles = ThemeHelperUtil.createRootStyles('dark', { '--w3m-accent': '#ff0000' })
+
+      expect(rootStyles).toContain('--w3m-font-family-mono:KHTekaMono')
+    })
+
     it('should always include keyframe animations regardless of font family setting', () => {
       const withCustomFont: ThemeVariables = { '--w3m-font-family': 'Custom Font' }
       const withoutCustomFont: ThemeVariables = {}