Adding emoji flags to sites where they're in common use

It took me until this week to realize that emoji flags weren't showing up for me on Bluesky when viewed on my PC. You'd think I'd have noticed earlier given the Ukrainian flag in my display name, leaving a small-caps'd "UA" in place of the flag, but I guess I'm just that inattentive.

As I googled around for a reason and fix, I found that Windows 10 had/has, for whatever reason political or otherwise, excluded flags from their emoji situation. I rarely update Windows itself because I'm lazy, and when I do I use an app to see what all I'm getting myself into, so maybe this has been remedied in later versions.

Regardless, I wanted a fix for Bluesky at the very least, because where else am I likely to see country flags, and I found one. While this fix is about shoring up your own site to make sure Windows users aren't left out, my fix is from a user perspective ⸺ and therefore involves a userstyle.

For Bluesky domains we add the following styles to the mix. They add a webfont to the mix, one with a source file that's optimized for country flags and is only targeted at specific Unicode ranges, and then apply it in a somewhat liberal manner. (It also overrides their main font of choice, Inter, with Segoe because I like it more.)

@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/country-flag-emoji-polyfill/dist/TwemojiCountryFlags.woff2') format('woff2');
}

html, body {
    font-family: 'Twemoji Country Flags', 'Segoe UI', sans-serif;
    
    [style*="font-family"] {
        font-family: 'Twemoji Country Flags', 'Segoe UI', sans-serif; !important;
    }
}

If Bluesky only ever set the font family once, we'd only need the selector targeting html and body. However, since modern front-end frameworks are wildly complex because of reasons, there are many elements that get their styles applied inline.

Loading up my profile I find 3,316 elements with inline styles. Of those, 462 have a font family declaration that's effectively reapplying the same font over and over rather than letting the cascading part of CSS do its job. It all seems a tad inefficient to me, but what do I know?

Either way, since the font gets applied repeatedly, I've targeted the nested selector to those elements with font declarations on them. Were I adapting this to another site, I might not need this selector at all or it may be better served as div or even *. It also may not need to be marked as important in those cases; overriding inline styles is a pain like that.

The real fix is not using Windows, or at least running some version of it that has emoji flags built in, but the version I'm on (22H2, whatever that means) doesn't have such things. 🤷‍♀️