feat(web): add UI font family preference to appearance settings#1803
feat(web): add UI font family preference to appearance settings#1803TaoXieSZ wants to merge 3 commits into
Conversation
The web settings exposed color scheme, accent, and font size, but the font family was pinned to the Inter-first stack. Add a Font preference (desktop SettingsDialog + mobile MobileSettingsSheet) with Default (Inter), System (platform UI stack), and Serif (reading-oriented stack) faces. The choice persists in localStorage, mirrors onto <html data-ui-font-family>, and remaps the --font-ui token, so UI and reading text switch with zero component changes while --font-mono stays put. Both alternate stacks use locally installed fonts only, so nothing extra is downloaded. Documents the new tokens in the design-system view.
🦋 Changeset detectedLatest commit: 7e6c11d The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Extend the font preference work based on user feedback on the linked issue. The UI font gains a Custom option whose free-text input accepts any locally installed font name (comma-separated fallbacks supported, generic keywords passed through unquoted), and a parallel Code font preference (Default / System / Custom) remaps --font-mono the same way, with the legacy --mono alias now forwarding to it so diffs, file previews, and composer code follow. Custom values are sanitized into a CSS font-family list with the default stack appended, so a typo'd or uninstalled name degrades to the default face instead of the browser's generic fallback. The xterm terminal keeps its fixed literal stack (xterm cannot resolve CSS variables); following the preference there is left as a follow-up.
|
Scope update: this PR initially shipped presets only (Default / System / Serif for the UI font). Following user feedback on #1797 asking for freely selectable fonts (e.g. Maple Mono NF CN), the second commit adds a Custom option with a free-text input for any locally installed font name, plus a parallel Code font preference (Default / System / Custom) that remaps |
Typing a font name by hand was the roughest edge of the custom option. The browser cannot enumerate installed fonts, so probe a curated candidate list (popular CJK + Latin UI faces, popular coding monos) with the canvas measureText trick and offer only the detected ones in a Select. A stored name that is not detected stays as an extra option so the current value always renders, and the dropdown's last entry keeps a manual text input for faces outside the candidate list.
|
UX follow-up: the Custom option now offers a dropdown of locally installed fonts instead of requiring the name to be typed. Since the web platform cannot enumerate installed fonts, we probe a curated candidate list (popular CJK + Latin UI faces in |
1 participant
Related Issue
Resolve #1797
Problem
See linked issue. In short: the web settings dialog exposes color scheme, accent, and font size, but the font family is pinned — UI/reading text to the Inter-first stack (
--font-ui), code to the JetBrains Mono stack (--font-mono). Users who prefer the native platform font, a serif reading face, or their own coding font (e.g. Maple Mono NF CN) have no way to change it.What changed
Two preferences in Appearance settings, in both the desktop
SettingsDialogand the mobileMobileSettingsSheet:Customreveals a free-text input accepting any locally installed font name (comma-separated fallbacks supported; CSS generic keywords pass through unquoted). The input is sanitized into a CSS font-family list with the default stack appended, so a typo'd or uninstalled name degrades to the default face instead of the browser's generic fallback.Mechanically: each choice persists in localStorage and is mirrored onto
<html data-ui-font-family>/<html data-code-font-family>, which remap the--font-ui/--font-monotokens instyle.css.--font-displayand--sansfollow--font-ui, and the legacy--monoalias now forwards to--font-mono, so every surface (chat Markdown, composer, diffs, file preview, sidebar) picks the preference up with no component-level changes. All alternate stacks use locally installed fonts only — no extra webfont downloads, consistent with the self-hosted/local-first font strategy.Also: new keys in both
enandzhtheme locales; the design-system view (DesignSystemView.vue§02) documents the preferences and the new tokens; a pure-logic test covers the custom-name sanitizing/quoting (test/custom-font.test.ts).Known limitation: the xterm terminal keeps its fixed literal JetBrains Mono stack — xterm's
fontFamilyoption cannot resolve CSS variables, so following the preference there needs a JS-side rebuild and is left as a follow-up.Verification
pnpm --filter @moonshot-ai/kimi-web check:style— no new findings (baseline unchanged)pnpm --filter @moonshot-ai/kimi-web typecheck(vue-tsc) — cleanpnpm --filter @moonshot-ai/kimi-web test— 608/608 pass (9 new assertions for the custom-name helper)pnpm --filter @moonshot-ai/kimi-web build— succeedspnpm exec oxlinton the touched files — 0 errorsChecklist
test/custom-font.test.tscovers the custom font-name sanitizing/quoting; the CSS-variable wiring itself is verified manually as listed above.)gen-changesetsskill, or this PR needs no changeset.gen-docsskill, or this PR needs no doc update. (The docs site does not cover the web UI's appearance settings today.)