diff --git a/src/index.css b/src/index.css index 33d9f9a..a69627f 100644 --- a/src/index.css +++ b/src/index.css @@ -1,9 +1,10 @@ -/* Twemoji font (Twitter emoji) */ +/* Twemoji font (Twitter emoji) — unicode-range keeps spaces/Latin out of emoji metrics */ @font-face { font-family: Twemoji; src: url('../public/font/Twemoji.Mozilla.v15.1.0.woff2'), url('../public/font/Twemoji.Mozilla.v15.1.0.ttf'); font-display: swap; + unicode-range: U+1F300-1F9FF, U+2600-26FF, U+2700-27BF, U+FE0F, U+200D, U+1F1E6-1F1FF; } /* Apple Color Emoji - uses local Apple Color Emoji if available (macOS/iOS), @@ -14,6 +15,7 @@ local('Segoe UI Emoji'), local('Noto Color Emoji'); font-display: swap; + unicode-range: U+1F300-1F9FF, U+2600-26FF, U+2700-27BF, U+FE0F, U+200D, U+1F1E6-1F1FF; } /* System emoji - uses native OS emoji */ @@ -26,6 +28,7 @@ local('Android Emoji'), local('EmojiOne Color'); font-display: swap; + unicode-range: U+1F300-1F9FF, U+2600-26FF, U+2700-27BF, U+FE0F, U+200D, U+1F1E6-1F1FF; } :root { @@ -42,7 +45,10 @@ --mx-uc-8: hsl(94, 100%, 35%); --font-emoji: 'AppleColorEmoji'; - --font-secondary: 'InterVariable', var(--font-emoji), sans-serif; + /* Must match @fontsource-variable/inter's family name ('Inter Variable'). + A wrong name falls through to emoji fonts — huge spaces on Linux (Noto Color Emoji) + and Twemoji COLR keycaps for digits. Emoji stays last for glyphs only (unicode-range). */ + --font-secondary: 'Inter Variable', var(--font-emoji), sans-serif; } .dark-theme, @@ -62,7 +68,7 @@ --mx-uc-7: hsl(243, 100%, 80%); --mx-uc-8: hsl(94, 100%, 80%); - --font-secondary: 'InterVariable', var(--font-emoji), sans-serif; + --font-secondary: 'Inter Variable', var(--font-emoji), sans-serif; } html {