[bug] Custom font (--apkt-font-family) breaks monospace text: mono is hardcoded KHTekaMono with no variable or fallback

[spennyp]

Link to minimal reproducible example

https://stackblitz.com/edit/github-e1adycfs?file=src%2FApp.tsx

Forked from the official react/react-wagmi example with a single added line in src/App.tsx's createAppKit theme config:

themeVariables: {
  '--apkt-font-family': "'Comic Sans MS', cursive"
}

Comic Sans is used deliberately so the unstyled text is obvious at a glance.

Steps to Reproduce

1. Open the StackBlitz above (or add themeVariables: { '--apkt-font-family': "'Comic Sans MS', cursive" } to any createAppKit config).
2. In the running app, click Connect → WalletConnect → the QR view.
3. Look at the "Copy link" button text: it is not Comic Sans, while every other label in the modal is. Wallet addresses and the amount input (send/swap) are affected the same way.

Summary

Setting a custom base font via --apkt-font-family (or the legacy --w3m-font-family) breaks every monospace piece of UI text. The WalletConnect "Copy link" button, wallet addresses, and amount inputs render in the browser default font instead of the custom font (or any monospace), while all regular text correctly switches to the custom font.

Expected: setting a custom base font should not leave monospace text unstyled. Mono text should fall back to the custom font (or a real monospace), not the browser default.

Actual: mono text renders in the browser default (serif) fallback.

Root cause (in @reown/appkit-ui):

• The regular font is themeable through the --apkt-fontFamily-regular CSS variable, which ThemeHelperUtil overrides with the custom font (overrides['--apkt-fontFamily-regular'] = normalized['font-family']). That is why regular text follows the custom font.
• The mono font is hardcoded as KHTekaMono (ThemeConstantsUtil → fontFamily.mono = 'KHTekaMono') with no --apkt-fontFamily-mono variable, so it cannot be overridden.
• On top of that, PR feat: conditionally import fonts only when custom font family is not provided #4542 made the @font-face blocks conditional: when a custom font is set, the KHTekaMono @font-face is dropped entirely. The hardcoded font-family: KHTekaMono then references an unloaded family with no generic fallback → browser default.

Mono consumers: the nine *-regular-mono variants in wui-text/styles and wui-input-amount/styles.

Suggested fix: add a --apkt-font-family-mono theme variable mirroring the existing regular one, defaulting to --apkt-font-family ?? --w3m-font-family ?? KHTekaMono when not explicitly provided. That way the common single-custom-font case follows the base font (nothing breaks), while explicit monospace control is still possible. Gate the KHTekaMono @font-face on whether the effective mono font is the bundled one, the same way the regular faces are already gated. Default behavior (no custom font) is unchanged.

List of related npm package versions

@reown/appkit: 1.8.20
@reown/appkit-adapter-wagmi: 1.8.20
@wagmi/connectors: 6.2.0
@wagmi/core: 2.22.1
wagmi: 2.19.5
viem: 2.47.0
@tanstack/react-query: 5.90.3

(Also reproduced locally on @reown/appkit 1.8.19.)

Node.js Version

v24.14.1 locally; the StackBlitz reproduction runs in the StackBlitz WebContainer.

Package Manager

pnpm 11.1.1 locally; npm in the StackBlitz reproduction.

[linear]

REOWN-4706