etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(flags): render flag emoji on Windows globally via a scoped flag font

Browse Source 
Windows ships no glyphs for regional-indicator flag emoji, so flags fell back to country letters everywhere react-twemoji wasn't manually wrapped. Bundle the Twemoji country-flags woff2 locally (no runtime CDN — matters for our audience) and add it as an @font-face scoped with unicode-range to flag codepoints only, then put it first in every Tailwind font stack (sans/display/mono). The browser now uses it solely for flag characters, so every flag renders correctly app-wide with zero markup changes and no effect on any other text.
This commit is contained in:
c0mrade
2026-06-01 16:00:28 +03:00
parent 7b7ff53672
commit b877d7f175
3 changed files with 18 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/fonts/TwemojiCountryFlags.woff2 Normal file
View File

Binary file not shown.

12
src/styles/globals.css
View File

@@ -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: '<angle>';

8
tailwind.config.js
View File

@@ -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',