country-flag-emoji-polyfill

That was my first thought, too! The article actually links to a polyfill which uses a subset font. Here’s the subsetting script it uses: https://github.com/talkjs/country-flag-emoji-polyfill/blob/m... Looks like the flags-only font is just 77 kb!

Wow cool! Sidenote, I'm the maintainer of the polyfill for this and its little script that extracts just the country flags from Mozilla's Twemoji font [0]. I'm not an expert by any stretch, but if it's in any way helpful that I chime into that Chromium bug then let me know. I'd love to deprecate the polyfill. [0] https://github.com/talkjs/country-flag-emoji-polyfill/blob/m...

Very helpful post! I was using flag emojis on a landing page and completely unaware that they weren't being rendered correctly on Windows. The author mentions a polyfill [1] and the fact that they dislike it's using a CDN. Fortunately, the polyfill can be configured to use a local/self-hosted font: > polyfillCountryFlags(fontName?: string, fontUrl?: string) Here's how I added it to my Astro landing page: https://github.com/pentacent/keila-web/commit/e96ec233eef631... [1] https://github.com/talkjs/country-flag-emoji-polyfill

The polyfill mentioned and linked in the article has a cleverer solution. It attempts to render the same flag emoji in two different text colors and checks if they end up being the same color or not (same color = probably a color glyph, ie an emoji). https://github.com/talkjs/country-flag-emoji-polyfill/blob/5...