Display country flags emoji on Windows

Display country flags emoji on Windows

Fix country flags emoji display on Windows with web font.

I've been using Windows for a while now. Everything goes well except it doesn't render country flags emoji. I didn't notice this until I became a Windows user.

In the Typlog admin portal, there is a region visit metric that displays country flags via emoji. It looks terrible on Windows. Here is how would it look like on Windows:

Broken country flags
Broken country flags

There are several ways to fix this problem:

I prefer the web font way, although this repo contains only a few stars on GitHub. I didn't use the code provided by country-flag-emoji-polyfill, it is the woff2 font I'm using directly in CSS. The font is a subset of "Twemoji Mozilla".

We would load the web font only on Windows because Mac and Linux can display country flags emoji well. In this way, it would reduce the HTTP requests and net bandwidth, though the font is quite small.

A simple JavaScript is required:

if (/windows/i.test(navigator.userAgent)) {
document.body.classList.add('win')
}

This code will add a win class to the <body> tag. We would only use the web font for .win in CSS:

@font-face {
font-family: 'Twemoji Country Flags';
unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
src: url('https://cdn.jsdelivr.net/npm/[email protected]/dist/TwemojiCountryFlags.woff2') format('woff2');
}
body {
font-family: var(--user-defined-font), sans-serif;
}
.win {
font-family: "Twemoji Country Flags", var(--user-defined-font), sans-serif;
}

Here is what the region visit metric looks like on Windows now.

Twemoji Country Flags
Display with Twemoji Country Flags