How do I display the latest Unicode characters (esp. emoji) in Windows browsers?

73,768

Solution 1

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.

Solution 2

Thanks, endolith, I was searching for this information. You really created a fine summary on the problem with Windows / Firefox and Unicode Emojis in versions higher than 6.0. ๐Ÿ‘

I was also looking for a possibility to upgrade Firefox on Windows 7 to show newer Emojis.

Although you tested with the Font Finder extension to find that FF uses the Arial font for displaying the Emojis the GitHub site states that Windows 7, 8 and 10 are using Segoe UI for the Emojis.

They only modify Segoe UI Symbol and Segoe UI Emoji with their new script to install Unicode V9 emojis, not the Arial font.

Windows 7, 8, 10 use emoji from both Segoe UI Symbol and Segoe UI Emoji. We need to replace both fonts, but keep the existing symbol characters from Segoe UI Symbol.

I will test their script now although it needs additional software to work.

This package contains an install script that will generate both fonts (or in Windows 7, just Segoe UI Symbol) and install them for you. Running the install script requires both Python and pip in the PATH.

GitHub reference: https://github.com/eosrei/emojione-color-font

Share:
73,768

Related videos on Youtube

endolith
Author by

endolith

I used to run Ubuntu, but then I upgraded to Windows 7.

Updated on September 18, 2022

Comments

  • endolith
    endolith over 1 year

    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: ๐Ÿฅฑ๐ŸคŽ๐Ÿค๐Ÿค๐Ÿฆพ๐Ÿฆฟ๐Ÿฆป๐Ÿง๐Ÿง๐ŸงŽ๐Ÿฆง๐Ÿฆฎ
    • ctrl-alt-delor
      ctrl-alt-delor almost 8 years
      You will need a font that has these characters. Each character has a number (code point), the number is looked up in a font, and displayed.
    • endolith
      endolith almost 8 years
      @richard Know of any? A browser extension that replaces them with images would also work.
    • jiggunjer
      jiggunjer almost 8 years
      what kind of websites use unicode emojies? I thought most forums use images with some markup language.
    • endolith
      endolith almost 8 years
      @jiggunjer Google Voice / any social site that people can post comments to from their iPhones. Some sites replace them with graphics, like Gmail, but others do not.
    • ctrl-alt-delor
      ctrl-alt-delor almost 8 years
      You need to find out how to install a fall-back font, for your operating system / windowing system / browser. And then install a font that supports these characters. (A fall-back font is one that is used when the selected fonts do not have a glyph for the code point.)
    • Solomon Ucko
      Solomon Ucko about 6 years
      Somehow, only the Unicode 10 ones show up. lh6.googleusercontent.com/โ€ฆ
    • endolith
      endolith over 4 years
      I got a new laptop with Windows 10 and it shows native emojis in Waterfox, Chrome, and Edge.
  • ctrl-alt-delor
    ctrl-alt-delor almost 8 years
    You will need to set the emoji font as a fall-back font. So it is used if all else fails. I do not know how or if you can do this on Microsoft's Windows.
  • 13rac1
    13rac1 over 7 years
    There is a Windows installer now for the EmojiOne Color font v1.3+ which merge with existing fonts so all characters work.
  • Victor Marchuk
    Victor Marchuk about 7 years
    This makes symbols from up to Unicode 9.0 just fine, but is there a way to also display proposed Unicode 10.0 symbols? E.g.: ๐ŸฅŸ๐Ÿฅก๐Ÿฅข๐Ÿฅ ๐Ÿคจ๐Ÿ—น
  • user1374303
    user1374303 over 6 years
    In case any fellow peruser is confused, like me-- the emojis in the answer above are all images : S
  • endolith
    endolith about 5 years
    It looks like native emoji were added in Firefox 50?
  • fred727
    fred727 over 4 years
    This font seems to be known out of the box in Google Chrome on Windows : just add a fallback font in css (the last of the font-familly list). For exemple : font-familly: arial,helvetica,clean,sans-serif,"EmojiOne Color"; Works like a charm !