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,5 @@
+---
+'@reown/appkit-ui': 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/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/ThemeHelperUtils.test.ts

@@ -169,4 +169,40 @@ describe('ThemeHelperUtil', () => {
     const emptyOverrides = ThemeHelperUtil.generateW3MOverrides({})
     expect(emptyOverrides['--apkt-tokens-core-zIndex']).toBeUndefined()
   })
+
+  it('should override the mono font family in generateW3MOverrides', () => {
+    // A custom base font alone also drives the mono font, so monospace text
+    // (Copy link, addresses, amount inputs) follows it instead of breaking.
+    const baseFontOnly = ThemeHelperUtil.generateW3MOverrides({
+      '--apkt-font-family': 'AppKit Font'
+    })
+    expect(baseFontOnly['--apkt-fontFamily-regular']).toBe('AppKit Font')
+    expect(baseFontOnly['--apkt-fontFamily-mono']).toBe('AppKit Font')
+
+    // An explicit mono font wins over the base font.
+    const explicitMono = ThemeHelperUtil.generateW3MOverrides({
+      '--apkt-font-family': 'AppKit Font',
+      '--apkt-font-family-mono': 'AppKit Mono'
+    })
+    expect(explicitMono['--apkt-fontFamily-regular']).toBe('AppKit Font')
+    expect(explicitMono['--apkt-fontFamily-mono']).toBe('AppKit Mono')
+
+    // A mono override with no base font leaves the regular font at its default.
+    const monoOnly = ThemeHelperUtil.generateW3MOverrides({
+      '--w3m-font-family-mono': 'AppKit Mono'
+    })
+    expect(monoOnly['--apkt-fontFamily-regular']).toBeUndefined()
+    expect(monoOnly['--apkt-fontFamily-mono']).toBe('AppKit Mono')
+
+    // No font variables -> no font overrides.
+    const noFont = ThemeHelperUtil.generateW3MOverrides({ '--w3m-accent': '#ff0000' })
+    expect(noFont['--apkt-fontFamily-regular']).toBeUndefined()
+    expect(noFont['--apkt-fontFamily-mono']).toBeUndefined()
+  })
+
+  it('should default the mono font to KHTekaMono when no font is provided', () => {
+    const vars = ThemeHelperUtil.generateW3MVariables({ '--w3m-accent': '#ff0000' })
+    expect(vars['--w3m-font-family']).toBe('KHTeka')
+    expect(vars['--w3m-font-family-mono']).toBe('KHTekaMono')
+  })
 })