fix(emoji): flags render on Windows; "Twitter emoji" works again

Windows' emoji font has no flag glyphs, so 🇺🇸 (:flag_us:) showed as the
letters "US". Two fixes:

- A TwemojiFlags @font-face over the bundled Twemoji file, limited by
  unicode-range to the regional-indicator letters (U+1F1E6–1F1FF), is put in
  the font stack on Windows only. Every other emoji stays native, other
  platforms keep their own flags, and the file is fetched only when a flag is
  on screen.
- The Appearance font setting overwrote --font-secondary with a stack that
  had no emoji families at all, so neither this nor the existing "Twitter
  emoji" switch reached message text. The font map now keeps
  var(--font-flags), var(--font-emoji) before the generic family.

Verified in Chromium via CDP platform fonts: with a Windows user agent 🇺🇸 is
drawn by "Twemoji Mozilla" while 😀 stays on the system emoji font; with a
Linux user agent both stay native.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
This commit is contained in:
Lotus CI
2026-09-24 22:33:23 -04:00
co-authored by Claude Opus 5.5
parent c0e8334f03
commit b71f9c95c6
3 changed files with 36 additions and 5 deletions
+8 -4
View File
@@ -37,11 +37,15 @@ import { zIndices } from '../styles/zIndex';
import { OIDC_CALLBACK_PATH } from './paths';
import { OidcCallback } from './auth/oidc/OidcCallback';
// The emoji families (Twemoji when "Twitter emoji" is on, Twemoji flags on
// Windows — see SystemEmojiFeature) must sit before the generic family, or the
// chosen font's stack silently drops them.
const EMOJI_FONTS = 'var(--font-flags), var(--font-emoji)';
const FONT_MAP: Record<string, string> = {
system: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
inter: "'InterVariable', sans-serif",
'jetbrains-mono': "'JetBrains Mono', monospace",
'fira-code': "'Fira Code', monospace",
system: `system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', ${EMOJI_FONTS}, sans-serif`,
inter: `'InterVariable', ${EMOJI_FONTS}, sans-serif`,
'jetbrains-mono': `'JetBrains Mono', ${EMOJI_FONTS}, monospace`,
'fira-code': `'Fira Code', ${EMOJI_FONTS}, monospace`,
};
function AppearanceEffects() {