Windows – How to display the latest Unicode characters (esp. emoji) in Windows browsers

firefoxfontsgoogle-chromeunicodewindows 7

None of my browsers (Firefox, Chrome, IE) display characters for Unicode 7, 8, 9 (or 10) emojis:

Unicode 9 are displayed as plain boxes

These are often sent to me by people on phones. Unicode 6 characters are supported, but hard to read/differentiate:

Unicode 6 emojis are displayed

How do I add support for these characters to a Windows 7 system? Is there a way to display them the way Android does, so they are easier to read?

Test characters:

  • Unicode 6.1: ??????????
  • Unicode 7.0: ????????
  • Unicode 8.0: ??????????
  • Unicode 9.0: ???????????
  • Unicode 10.0: ??????????
  • Unicode 11.0: ????????????
  • Unicode 12.0: ????????????

Best Answer

I found the Emoji One font, which supports all the emojis up to the current Unicode version, including color emojis (by embedding SVGs or something).

If the font is specified, Firefox supports the colored emojis fine:

using the font with span tag

and Chrome and IE support its monochrome fallbacks:

Chrome with monochrome emoji with span tag

but just installing the EmojiOneColor-SVGinOT.ttf font into Windows is not good enough to get rid of the boxes, apparently because other fonts are preferred over it?

Partial workarounds:

Chrome

Installing the Emoji Keyboard (2016) extension and enabling "Auto-Replace" in the options (which is on by default):

Auto-Replace: Replace all emoji in Chrome to Emoji One

produces colored emoji in Chrome up to Unicode 9. (The supported Unicode version is stated on the eosrei/emojione-color-font Releases page):

Colored emoji in Chrome

The auto-replace works on every site, but not in editable text boxes.

Firefox

Firefox displays the characters with Arial regardless of what you have installed, which you can see by installing the FontFinder extension.

A Greasemonkey script will add the font to the body tag of all pages, but this doesn't fix the problem on several that I tested. It works on a few, like superuser.com.

Changing the browser's default font to Emoji One does seem to work in most cases, but may have side effects. (For instance, this replaces the ™ sign, too, which Chrome's extension does not do.)

The Emoji Everywhere extension kind of works, but seems to slow down page load compared to the font, and only supports Unicode 6.1.

Related Question