Unicode emoji characters use different image/font based on browser

Question

I am currently working on a project that embeds an object that uses unicode emoji characters. The problem is, these unicode emoji characters are displaying differently depending on which browser I use. Google Chrome and Mozilla Firefox for example just display the windows version of the unicode emoji characters. Internet Explorer 11 on the other hand displays the desired version (a custom font).

Problem in pictures:

This is how it should look and how it looks on Internet Explorer 11 (with custom font):

This is how it currently looks on Google Chrome and Mozilla Firefox (with standard windows visuals):

The unicode emoji character I am using can be found here: link. The one I am using is called: "hot beverage" on space 694. As you can see, there is one visual style we recognize, the Windows one used by Chrome and Firefox.

So, now I know that Chrome and Firefox both use the windows font for the visualisation of the unicode emoji characters. Based on this info I tried fixing this problem by editing my css (@fontface to be exact) and importing a custom font. This didn't work at all. After this I found out that Internet Explorer does display it correctly without having to import a custom font. This led me to believe that the solution lies in the difference between these browsers. The problem is, I don't know what causes this difference. So that's why I am here:

Does anyone know what causes this difference in displaying the unicode emoji characters? I already tried solving it myself, because I suspected maybe they wouldn't all support the same fonts, but if I look here: https://www.w3schools.com/css/css3_fonts.asp it seems like that couldn't be the problem.

Any help is greatly appreciated.

EDIT: After a lot of trying I have made a new discovery. On a Windows 7 Ultimate it shows the correct display (the non-windows one) on both Internet Explorer 11 and Google Chrome;

On a Windows 10 Enterprise it shows the correct display (the non-windows one) on only Internet Explorer 11. On Google Chrome it shows the windows font.

So now the question is, what is the difference between these Windows version that causes this?

EDIT: It gets even weirder. Windows 7 Ultimate + GoogleChrome:

Windows 7 Ultimate + Internet Explorer:

Windows 7 Ultimate + Mozilla Firefox:

Windows 7 Ultimate comparison of webpage with unicode emoji:

Windows 10 Enterprise + Google Chrome:

Windows 10 Enterprise Internet Explorer 11:

Windows 10 Enterprise Mozilla Firefox:

Windows 10 Enterprise comparison of webpage with unicode emoji:

Anyone have any idea on how to make them all look like the Windows 10 Enterprise Internet Explorer 11 example?

Well, yes, each platform/vendor/OS has its own set of emoji fonts… emojipedia.org/hot-beverage If you want a pixel perfect identical representation across platforms, you should use images (use some library that replaces emoji characters with images) or force some specific web font. — deceze♦
Unfortunately I can't use images or replace the emoji characters with images. Regarding the forcing of some specific web font, is there a standard web font that uses the black/white unicode emoji's? (as seen here: emojipedia.org/hot-beverage/https://emojipedia.org/hot-beverage) — CvP

CvP CvP · Accepted Answer · 2018-08-01T14:12:20

The solution is to force this css on top of the embedded element:

font-family: "Segoe UI Symbol";

This is the black-white font I was looking for and what I wrongly assumed was the native unicode font.

Road to solution:

After some help and a lot of searching I discovered there was no native unicode font and thus I only needed to find the correct font.
After a long search I came across this: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11635143/
This included this link: https://codepen.io/prometheusTX/pen/vmZzxG:

span {

  font-size:36px;

  font-family: "Segoe UI Emoji";

}

h1 {

  font-size:36px;

  font-family: "Segoe UI Symbol";

}

As you can see, here is where I found the solution / font I was looking for.

In the end it was pretty simple, but the journey towards it was pretty difficult.

Thanks everyone for the help here and elsewhere.

Unicode emoji characters use different image/font based on browser

1 Answers