diff --git a/public/fonts/TwemojiCountryFlags.woff2 b/public/fonts/TwemojiCountryFlags.woff2 new file mode 100644 index 0000000..b9d6ea8 Binary files /dev/null and b/public/fonts/TwemojiCountryFlags.woff2 differ diff --git a/src/styles/globals.css b/src/styles/globals.css index b351a0f..849ca51 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -2,6 +2,18 @@ @tailwind components; @tailwind utilities; +/* Flag emoji polyfill — Windows has no glyphs for regional-indicator flags, so + they fall back to country letters. This locally-bundled Twemoji flag font is + scoped via unicode-range to ONLY flag codepoints, so adding it to the front + of the font stacks fixes every flag everywhere without touching any markup + and without affecting any other text. Root fix, not a per-component wrap. */ +@font-face { + font-family: 'Twemoji Country Flags'; + unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E007F; + src: url('/fonts/TwemojiCountryFlags.woff2') format('woff2'); + font-display: swap; +} + /* Animated gradient border — @property enables CSS-only angle animation */ @property --border-angle { syntax: ''; diff --git a/tailwind.config.js b/tailwind.config.js index 4729ba0..fb1410b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -110,7 +110,11 @@ export default { }, }, fontFamily: { + // 'Twemoji Country Flags' is first in every stack so Windows renders flag + // emoji (it's unicode-range-scoped to flag codepoints only — see globals.css — + // so it never affects any other glyph). Global root fix for flags everywhere. sans: [ + 'Twemoji Country Flags', 'Manrope', 'system-ui', '-apple-system', @@ -119,8 +123,8 @@ export default { 'Roboto', 'sans-serif', ], - display: ['Outfit', 'Manrope', 'system-ui', 'sans-serif'], - mono: ['IBM Plex Mono', 'ui-monospace', 'monospace'], + display: ['Twemoji Country Flags', 'Outfit', 'Manrope', 'system-ui', 'sans-serif'], + mono: ['Twemoji Country Flags', 'IBM Plex Mono', 'ui-monospace', 'monospace'], }, borderRadius: { bento: '24px',