I’ve been experimenting with using emoji in code lately, and one thing that bothered me was how bad my emoji rendered on Windows on the web. For instance, I changed one section of blog to use a few emoji, and that section looked like this on OS X.

But the exact same set of emoji looked like this on Windows.

This drove me nuts, because the characters I was using were exactly the same, and Windows has really good emoji support. After extensive googling I finally figured out what was up.

Apparently, Windows’ polished emoji live in a specific system font named “Segoe UI Emoji”. And unless you specifically target that font in CSS your emoji will fallback to the boring graphics you see in the screenshot above.

So what I did was define an emoji CSS class name.

.emoji {
    font-family: "Segoe UI Emoji";
}

And then made sure that every emoji I used was surrounded by a <span> with that class name.

<span class="emoji">🚀</span>

And with that approach my emoji looked substantially nicer on Windows.

NOTE: There’s no harm in applying the “Segoe UI Emoji” font family on non-Windows operating systems; the font declaration will be ignored when the named font is not available.

Ideally browsers on Windows would automatically detect the emoji unicode range and apply the “Segoe UI Emoji” font family automatically; Firefox on Windows seems to do this already, but Edge and Chrome do not. I submitted this as a feature request both to the Microsoft Edge team (here), and the Google Chrome team (here), so perhaps this won’t be an issue in the future.

Until then, hopefully this post helps you get your emoji looking sharp! 😎