You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This PR adds a "Custom" font family option to the desktop app's Appearance settings, allowing users to specify any font stack they prefer (e.g., "LXGW WenKai", "JetBrains Mono", monospace).
Previously, users were limited to four hardcoded choices: System Default, YaHei, PingFang, and Noto Sans. With this change, users can type in an arbitrary CSS font-family value, which is persisted in localStorage and applied via a CSS custom property (--font-family-custom).
Motivation
Users with specific typographic preferences (e.g., open-source CJK fonts like LXGW WenKai, or monospace coding fonts) had no way to override the built-in options.
The "Custom" + textarea pattern is a low-cost, high-flexibility approach that avoids bloating the preset list while giving full control to power users.
Changes
File
Change
desktop/frontend/src/lib/fontFamily.ts
Added "custom" to FONT_FAMILIES; added getCustomFontName() / setCustomFontName() helpers; applyFontFamily() now sets --font-family-custom CSS custom property when "custom" is selected.
desktop/frontend/src/components/SettingsPanel.tsx
Added customFontName state + textarea input, wired into AppearanceSection; the textarea only renders when fontFamily === "custom".
desktop/frontend/src/styles.css
Added :root[data-font-family="custom"] rule that uses var(--font-family-custom) as primary font with PingFang SC → Microsoft YaHei → Noto Sans SC → system sans-serif fallback chain.
User selects "Custom" from the font family dropdown in Settings → Appearance.
A textarea appears below, accepting a CSS font-family value (e.g. "LXGW WenKai", "JetBrains Mono", monospace).
On change, the value is stored in localStorage under reasonix-font-family-custom and injected as --font-family-custom on document.documentElement.
The CSS rule :root[data-font-family="custom"] reads var(--font-family-custom) as the primary --sans value, with the existing system font stack as fallback.
Switching back to "System Default" clears the custom property; switching to other presets does not interfere.
Thanks for adding this. I found one behavior issue that should be fixed before merge:
When Custom is selected before the user enters a font stack, or after the textarea is cleared, applyFontFamily("custom") still writes --font-family-custom with an empty string. The CSS then builds --sans as var(--font-family-custom), ..., so the computed font stack can start with a leading comma instead of reliably falling back to PingFang / YaHei / Noto / system fonts.
Could you guard empty custom values? For example, trim the custom value and remove/avoid --font-family-custom when it is blank, or structure the CSS/JS so an empty custom value falls back to the existing default stack until the user provides a non-empty font family.
I verified the PR merges cleanly with current main-v2. After generating Wails bindings, these passed locally: typecheck, test:all, check:css, and build.
Thanks for this — landed it as #4194 on current main-v2. I fixed the empty-value case @SivanCola flagged (blank custom name no longer writes an empty --font-family-custom; the CSS now falls back via var(--font-family-custom, "PingFang SC"), so the stack never starts with a leading comma) and dropped a redundant double applyFontFamily call. Credit kept to you, with @SivanCola's review folded in. Merging #4194 once CI is green and closing this in favour of it.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
desktopWails desktop app (desktop/**)v2Go rewrite (1.x) — main-v2 branch, active development
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds a "Custom" font family option to the desktop app's Appearance settings, allowing users to specify any font stack they prefer (e.g.,
"LXGW WenKai", "JetBrains Mono", monospace).Previously, users were limited to four hardcoded choices: System Default, YaHei, PingFang, and Noto Sans. With this change, users can type in an arbitrary CSS
font-familyvalue, which is persisted inlocalStorageand applied via a CSS custom property (--font-family-custom).Motivation
Changes
desktop/frontend/src/lib/fontFamily.ts"custom"toFONT_FAMILIES; addedgetCustomFontName()/setCustomFontName()helpers;applyFontFamily()now sets--font-family-customCSS custom property when"custom"is selected.desktop/frontend/src/components/SettingsPanel.tsxcustomFontNamestate + textarea input, wired intoAppearanceSection; the textarea only renders whenfontFamily === "custom".desktop/frontend/src/styles.css:root[data-font-family="custom"]rule that usesvar(--font-family-custom)as primary font with PingFang SC → Microsoft YaHei → Noto Sans SC → system sans-serif fallback chain.desktop/frontend/src/locales/en.tssettings.fontFamilyCustom,settings.fontFamilyCustomName,settings.fontFamilyCustomPlaceholder.desktop/frontend/src/locales/zh.tsHow It Works
font-familyvalue (e.g."LXGW WenKai", "JetBrains Mono", monospace).localStorageunderreasonix-font-family-customand injected as--font-family-customondocument.documentElement.:root[data-font-family="custom"]readsvar(--font-family-custom)as the primary--sansvalue, with the existing system font stack as fallback.