cssunicodeemoji

Unicode emoji characters use different image/font based on browser

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): Desired / Correct display of unicode emoji character

This is how it currently looks on Google Chrome and Mozilla Firefox (with standard windows visuals): Windows / Wrong display of unicode emoji character

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:

Windows7UltimateGoogleChrome.PNG

Windows 7 Ultimate + Internet Explorer:

Windows7UltimateInternetExplorer.PNG

Windows 7 Ultimate + Mozilla Firefox:

Windows7UltimateMozillaFirefox.PNG

Windows 7 Ultimate comparison of webpage with unicode emoji:

Windows7UltimateComparison.png

Windows 10 Enterprise + Google Chrome:

Windows10EnterpriseGoogleChrome.PNG

Windows 10 Enterprise Internet Explorer 11:

Windows10EnterpriseInternetExplorer11.PNG

Windows 10 Enterprise Mozilla Firefox:

Windows10EnterpriseMozillaFirefox.PNG

Windows 10 Enterprise comparison of webpage with unicode emoji:

Windows10EnterpriseComparison.png

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

Solution

  • 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:

    span {

  font-size:36px;

  font-family: "Segoe UI Emoji";

}

h1 {

  font-size:36px;

  font-family: "Segoe UI Symbol";

}

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

    Thanks everyone for the help here and elsewhere.