fix(ui): style mono text with --apkt-font-family-mono falling back to base font

Author: spennyp

.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.

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

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

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']}`
     }

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

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 = {}