fix(desktop): add color-emoji font fallback so emoji render (#40364)

None of the UI sans/mono font stacks (themes/presets.ts, styles.css) carry
emoji glyphs, so on platforms whose default text font lacks them (e.g. Linux)
emoji rendered as tofu boxes in the composer and chat.

Append a color-emoji fallback — Apple Color Emoji / Segoe UI Emoji / Segoe UI
Symbol / Noto Color Emoji / the `emoji` generic — to every font stack
(SYSTEM_SANS, SYSTEM_MONO, the Courier theme, and the CSS --dt-font-* defaults).
Text still uses the primary fonts; the browser only falls back for emoji
codepoints. Custom themes build on SYSTEM_* so they inherit it automatically.
This commit is contained in:
xxxigm
2026-06-06 19:58:39 -07:00
committed by Teknium
parent b08662b782
commit bec07964be
2 changed files with 18 additions and 7 deletions
+14 -5
View File
@@ -5,10 +5,19 @@
import type { DesktopTheme, DesktopThemeTypography } from './types'
const SYSTEM_SANS =
'"Segoe WPC", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif'
// Color-emoji fonts to append to every stack as a last resort. None of the UI
// text/mono fonts carry emoji glyphs, so without this emoji render as tofu
// boxes on platforms whose default text font lacks them (e.g. Linux/#40364).
// Covers macOS, Windows, Linux, plus the `emoji` generic for anything else.
export const EMOJI_FALLBACK =
'"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", emoji'
const SYSTEM_MONO = '"Cascadia Code", "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace'
const SYSTEM_SANS =
'"Segoe WPC", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif, ' +
EMOJI_FALLBACK
const SYSTEM_MONO =
'"Cascadia Code", "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace, ' + EMOJI_FALLBACK
export const DEFAULT_TYPOGRAPHY: DesktopThemeTypography = { fontSans: SYSTEM_SANS, fontMono: SYSTEM_MONO }
@@ -228,8 +237,8 @@ export const cyberpunkTheme: DesktopTheme = {
userBubbleBorder: '#004800'
},
typography: {
fontMono: `"Courier New", Courier, monospace`,
fontSans: `"Courier New", Courier, monospace`
fontMono: `"Courier New", Courier, monospace, ${EMOJI_FALLBACK}`,
fontSans: `"Courier New", Courier, monospace, ${EMOJI_FALLBACK}`
}
}