Expand font choices and preview fonts in the dashboard selector #510

Activity

1. m-aebrer commented on Sep 11, 2026

   

   m-aebrer

   on Sep 11, 2026

   Collaborator

   More actions

   Likely should include the option to upload a font file manually, for custom fonts.
2. m-aebrer

   added

   enhancementNew feature or requestNew feature or request

   P2Nice to haveNice to have

   on Sep 11, 2026
3. Anjiro81 commented on Oct 2, 2026

   

   Anjiro81

   on Oct 2, 2026

   ContributorAuthor

   More actions

   Issue Assessment

   Summary and confirmed scope

   Expand Dashboard's curated, legally distributable font catalog and let users see each typeface directly in the font picker, without changing browser-local selection/persistence.

   The manual-upload suggestion in this issue's discussion was explicitly clarified with the requester on 2026-10-02. Their selected scope was: “Catalog and preview picker only; handle uploads separately.” Browser-local and host-wide font uploads are therefore excluded from this change.

   Current state

   Inspected clean upstream master at e5a8b0a8f0b81f3c10cbba48927e661af6fe5c30:

   • packages/dashboard/src/client/state/appearance.ts defines seven picker entries: Theme default plus IBM Plex Mono, JetBrains Mono, Fira Code, Iosevka, OpenDyslexic, and Atkinson Hyperlegible. Stable IDs drive validation, localStorage, cross-tab synchronization, and data-font attributes.
   • src/client/components/theme-gallery.tsx renders a labelled native <select> with plain-text options. Theme cards preview the selected font, but picker options do not preview their own families.
   • src/client/styles/themes.css supplies local @font-face definitions and explicit font overrides. Five families use 17 bundled WOFF2 files totaling approximately 1.40 MB; IBM Plex Mono remains Google-hosted.
   • src/client/index.html restores persisted font IDs synchronously before stylesheet loading. Its inline allowlist must stay synchronized with the TypeScript catalog.
   • Assets already have SIL OFL licenses and provenance records, including pinned sources, processing details, and checksums for most families. packages/dashboard/package.json explicitly includes these legal records in published packages.
   • Unit, screen, and Chromium browser tests cover catalog identity, storage, bootstrap, applied typography, font loading, glyph fallback, and theme-card previews. Existing tests assume the seven-entry native selector.

   Gaps and implementation direction

   1. Broader catalog: add a meaningful selection of distinct, permissively licensed families. A reasonable planning target is roughly doubling the six explicit choices, with the exact set selected after source/license and payload checks. This is a proposed implementation target, not an additional acceptance criterion.
   2. Reliable per-option preview: styling native <option> elements alone does not reliably control OS-rendered menus across browsers. Prefer a focused accessible font-picker popup/listbox whose visible option labels render in their corresponding families. Preserve clear names, selected state, and Theme default behavior.
   3. Loading: keep the closed picker free of unrelated font requests. Opening the picker may load preview faces; heavyweight bold/italic variants should not all load merely to display regular-weight option labels. Existing lazy-loading assertions and documentation need to distinguish closed versus open picker behavior.
   4. Consistency: extend catalog types/validation, CSS mappings, the early bootstrap allowlist, and published license/provenance records together. Preserve existing IDs, storage keys, default removal, and cross-tab behavior.
   5. Tests/docs: exercise actual rendered previews and keyboard interaction, not just labels or CSS declarations. Update the root and package documentation describing the catalog and loading behavior.

   Ambiguities

   • The issue does not prescribe a font count or named new families; choose the final set during planning based on variety, licensing, supported faces, and payload.
   • No specific asset budget is stated. Record before/after sizes and test request behavior rather than introducing an arbitrary requirement.
   • Theme default is a behavior, not an independent typeface. Its picker preview should reflect the active theme's built-in typography without accidentally inheriting an explicit override.
   • Manual upload ambiguity is resolved as excluded for this change.

   Scope and complexity

   Medium-sized Dashboard client feature, localized mainly to appearance state, the font-picker component, styles, bootstrap, assets/package publishing metadata, tests, and documentation. No server API, RPC protocol, host-file upload, or new runtime dependency is expected.

   Explicitly out of scope / prior dispositions

   • Font uploads: excluded by the requester’s explicit scope choice above; pursue separately.
   • Medieval/papyrus theme: deferred in the historical appearance PR and accepted as deferred; not re-adopted by this issue. Sources: Add curated dashboard appearance themes #372 (comment) and Add curated dashboard appearance themes #372 (comment).
   • TUI theme mapping, component-library adoption, arbitrary CSS/theme upload: exclusions in historical appearance issue Dashboard appearance system: curated themes with per-theme light/dark, fonts, and color schemes #325, not requirements for this issue. Theme upload is not evidence of a general rejection of font-file upload.
   • IBM Plex self-hosting: previously treated as a separate follow-up, not required here: Add dashboard font selection #487 (comment).
   • Theme-color editing: separate pending work at Add dashboard GUI for customizing theme colors #520, not font-picker scope.
   • The initial two-family limit in the prior font PR was superseded by later approved additions; it does not constrain this catalog expansion. Historical context: Add dashboard font selection #487 (comment).

   Risks and verification

   • A custom picker must retain accessible naming, focus management, arrow navigation, Home/End, typeahead, Enter/Space selection, Escape cancellation, outside dismissal, and ordinary Tab navigation. Touch/mobile layout must remain usable.
   • Per-option typography can be falsely “verified” while a fallback face is actually rendering. Real-browser tests should wait for intended font loading and inspect resolved families and request behavior.
   • Loading every bundled face on Settings mount would turn catalog expansion into a startup/network regression. Check closed-picker requests separately from open previews and active selection.
   • Modified/subset assets require accurate license handling, including Reserved Font Names where applicable. Preserve copyright/license files and ensure npm packaging includes them.
   • Keep catalog IDs, CSS family names, bootstrap literals, tests, and docs synchronized; an omitted bootstrap ID would cause a wrong-font first frame after reload.
   • New fonts may change line widths and glyph coverage; preserve fallback stacks and test representative controls/code/status glyphs rather than assuming every family is monospace.

   No code has been changed. Next step is a focused implementation plan and draft PR.

   ---

   Automated assessment by mach6
4. Anjiro81 commented on Oct 2, 2026

   

   Anjiro81

   on Oct 2, 2026

   ContributorAuthor

   More actions

   Approved scope update — 2026-10-02

   The requester expanded the planned catalog: “15 each, so 30 total”, referring to serif and sans-serif Latin fonts, and then emphasized “don't remove the existing choices in the current dreb version. i want just to add options.”

   Implementation will therefore add 15 serif and 15 sans-serif families, preserving the current six explicit choices and Theme default unchanged: 36 explicit font choices plus Theme default. The expanded plan is maintained on #540.

   The requester accepted keeping this change Latin-focused. Dedicated Korean/Chinese/Indian-script font bundles are excluded; existing browser/system fallback for multilingual text remains intact. Manual font-file upload remains separate as previously confirmed.

   ---

   Progress tracked by mach6
5. m-aebrer

   closed this as completedin #540on Oct 8, 2026