How are you adding emojis to your page?

You need to use the unicode not the ASCII one.

Here is the list of all emojis and their unicode with previews of what they look like on different platforms :
[unicode.org...]

@Dimitri
Exactly, I'm using unicode but as you can see in the chart that you linked to, emoji's are rendered differently (if at all) on different platforms. If you are on Windows check the column "browser" to see how the emojis are rendered, in your browser.

Well, of course they’re rendered differently, just like the letter “a” will look different from one computer to the next. They’re not actually pictures, they’re characters in a font, and different operating systems have different default fonts. (If this question had been asked 20 or even 10 years ago, it would here be necessary to insert a digression on font substitution, but by this time even MSIE has grasped the concept.)

But please think twice about slathering on the emojis. People with older computers may simply not have them; every now and then I come across something that was clearly intended to be a pretty picture and instead displays as a little rectangle containing hexadecimals.

But please think twice about slathering on the emojis

I thought twice and I'm laying them on thick. Any given page can have close to 80 emoji's on it. That will be 80 square boxes for those that insist on using older computers.

They’re not actually pictures, they’re characters in a font, and different operating systems have different default fonts.

Got it. The problem is that some operating systems (Windows) do a really bad job of rendering the font, thus the need to include a custom font. The problem is that the custom font is better than nothing on Windows but worse than the default on other OS's. Since users a accustomed to the rendering of Emoji's on these other OS's I would very much like to use the defaults where possible. Mind you cross platform consistency would be nice too.

I can't be the only person having this issue with emojis, is there a common way of addressing it?

The problem is that the custom font is better than nothing on Windows but worse than the default on other OS's.

Are you able to put each of those emojis into a named span (even if it means 80 of them on the page)? You then need to put a line in the CSS that says

span.emoji {font-family: OSFamily1, OSFamily2, MyFamily3;}

listed in order of preference: the ones that are better than your custom font come before your custom font. The browser will pick the first one it has available. And then elsewhere in the CSS you put an @font-face rule to cover the custom font.

:: quick detour to caniuse dot com ::

OK, yes, @font-face is supported in all browsers back to the dawn of time (for example, FF 3.5 and up, Safari 3.2 and up) and also in MSIE 9 and up. (MSIE 6-8 only allows the EOT format, which nobody uses.)

I don’t know the font names offhand, but that kind of thing is fairly easy to find out. Search for something like “emoji font” + specific OS name.

@Lucy24
Interesting approach, but for this approach to work the fonts used ahead of my custom fonts would all need to fail on windows only. But my understanding is that defaults fonts for Linux, Android, IOs would all load on Windows, they just would do a lousy job rendering the Emojis.

I was thinking of something like this:

if (window.navigator.platform == "Win32") body.style["font-family"] = "OpenSansEmoji";

This obviously needs refining, but this it shows the general idea.

But my understanding is that defaults fonts for Linux, Android, IOs would all load on Windows, they just would do a lousy job rendering the Emojis.

Yup, that's yet another complication. Sometimes two or more platforms will have a font with the same name, but it isn’t really the identical font. Or, worse, they look the same for basic Latin-1 text and then have entirely different content when you get into remoter unicode ranges.

If you use a script-based solution, some users with scripting turned off will get a worse result. You then have to decide which scriptless users are most expendable.

If you use a script-based solution, some users with scripting turned off will get a worse result

If the user has scripting turned off, they will get nothing as the website is an online tool that requires JS.

Well, that definitely makes it easier :)

Update:
I finally got around to implement this. Basically what I do is load two fonts using @font-face, OpenSans from Google Fonts and OpenSansEmoji. Then using the code shown in my post above (2up), I conditionally assign OpenSansEmoji to font-family on the body tag and otherwise OpenSans. The down side to this is that I need to load two fonts where only one is ever needed. Using http/2 and caching mitigates this, but ideally I would like to find a way to avoid this.

In the process I discovered that on Linux, sans-serif provides the same character support as OpenSansEmoji. This isn't the case on Windows. Why is this relevant? My default font declaration for body was:

font-family: OpenSans, sans-serif;

But doing this resulted in the same outcome as loading OpenSansEmoji. Basically, the fall back takes effect at the character level, so since OpenSans doesn't have support for emojis, it falls back to sans-serif, sans-serif supports emojis nearly, if not perfectly, identical to OpenSansEmoji, then where sans-serif or OpenSansEmoji lack support, the default Linux font kicks in with full color emojis. To fix this, I changed the fallback to serif and now all the emoji appear in color on Linux.

You're talking about Microsoft and Microsoft is a highly political corporation and so there is no way to directly answer the question without being dragged in to nasty politics (the art of fraud). They're against culture and sovereignty so they support a one-world dictatorship which means destroying countries so that is why the emoji flags haven't been supported even though Microsoft has since released newer released versions of emojis.

Unfortunately emoji support predominantly relies on the operating system, not the browser. That is not to say that you can't use a browser that implements some emoji support. Keep in mind that while it's a nice-to-have there are inconsistencies so using emojis should only be considered a baseline until you implement your own direct support (if you're coding).

I'm not extensively familiar with emoji fonts though I can mention you'll have to ensure that the font type is supported on all the platforms anticipated to be used. Ultimately until politics are removed you may have luck with fonts or have to fall back to inline SVG or doing a find-and-replace on your server.

John