77

I've upgraded from 17.10 to 18.04 and was hoping to have better emoji support. The results are that Chrome (66) is still using the old black and white emoji font, and Firefox (59) is managing to show some color emoji but not others. I took some advice to install the font EmojiOne but that didn't seem to help

Screenshots from the emoji demo page at http://eosrei.github.io/emojione-color-font/full-demo.html :

Chrome: enter image description here

Firefox: enter image description here

N3dst4
  • 1,493

9 Answers9

83

For anyone else having the problem, uninstalling and re-installing the font pack worked for me (Ubuntu 19.10)

$ sudo apt remove fonts-noto-color-emoji
$ sudo apt install fonts-noto-color-emoji

or just

$ sudo apt reinstall fonts-noto-color-emoji

Then restart Chrome.

Edit:

The problems comesback sometimes when Chrome gets an update, and then I have to re-install the font.

IDK if it helps but maybe copying the font into /usr/local/share/fonts will solve this for future updates:

sudo cp -r /usr/share/fonts/truetype/noto /usr/local/share/fonts/truetype/noto
nuno
  • 937
56

I fixed it - I had to follow these instructions from 2016 I had to create ~/.config/fontconfig/conf.d/01-emoji.conf with the following text:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <alias>
    <family>serif</family>
    <prefer>
      <family>Noto Color Emoji</family>
    </prefer>
  </alias>
  <alias>
    <family>sans-serif</family>
    <prefer>
      <family>Noto Color Emoji</family>
    </prefer>
  </alias>
  <alias>
    <family>monospace</family>
    <prefer>
      <family>Noto Color Emoji</family>
    </prefer>
  </alias>
</fontconfig>

The bit in the original instructions about installing Noto font was unnecessary since it's installed as part of 18.04 by default.

Then run:

fc-cache -f -v

On the next restart, Chrome has color emoji.

Treviño
  • 2,604
N3dst4
  • 1,493
32

On Ubuntu 18.04+ you can now simply install a single package: fonts-noto-color-emoji. After that, restart Chrome and it will take effect. No need for creating a manual font configuration.

This package is supposed to be installed on the regular Ubuntu 18.04+ desktop flavor (on a 'Recommended' level of dependency - check for yourself with apt rdepends fonts-noto-color-emoji). Some other flavors like Kubuntu (KDE) don't have this by default and require you to install it manually.

gertvdijk
  • 69,427
5

Don't use that demo page to test color emoji. That page only demonstrates the EmojiOne font which isn't installed by default in Ubuntu (although Firefox uses a variation of it).

Instead use https://unicode.org/emoji/charts/full-emoji-list.html

Look at the Browser column. In default Ubuntu, it should mostly match the Google column. (Except for the Browser column, all the other columns are just .png icons). When I tested today, the Google column is just a bit out of date as Google has made some changes to some of their emoji that haven't been incorporated into the website. (For instance, the hamburger has cheese on top of the burger.)

Jeremy Bicha
  • 8,294
4

I use emoji.conf.

enter image description here

...............

Alberto Salvia Novella
  • 772
3

It seems this problem can be caused by having multiple incompatible emoji fonts installed, and/or having wrong default font selected in Chrome.

  1. Make sure you have fonts-noto-color-emoji package installed.

    sudo apt install fonts-noto-color-emoji

  2. Create/Edit font config files as in @N3dst4's answer.

    • Note: While @N3dst4 put his config file in ~/.config/fontconfig/conf.d/01-emoji.conf, I put my in ~/.config/font-manager/local.conf because of how my system is set up.
    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <alias>
    <family>serif</family>
    <prefer>
      <family>Noto Color Emoji</family>
    </prefer>
  </alias>
  <alias>
    <family>sans-serif</family>
    <prefer>
      <family>Noto Color Emoji</family>
    </prefer>
  </alias>
  <alias>
    <family>monospace</family>
    <prefer>
      <family>Noto Color Emoji</family>
    </prefer>
  </alias>
</fontconfig>

  3. Set default fonts in Chrome to variations of "Noto".

  4. Rebuild font cache + restart chrome.

    fc-cache -f -v

  5. If emojis are still not displayed correctly see what fonts are used to render them with right click on emoji -> Inspect -> Computed -> Rendered Fonts and uninstall them.

    • Example: My emojis were rendered by font Twitter Color Emoji, so I needed to uninstall package fonts-twemoji-svginot.
    • You might not need to uninstall fonts if you play more with font config files, but I have not tested that.
    • Don't forget to rebuild font cache + restart chrome after uninstalling fonts.

BTW this also fixed Zalgo text for me.

Jiří Kuneš
  • 61
1

None of the suggestions here solved my problem that Google Chrome on Ubuntu 18.04 would not show color emoji, no matter what I did . Eventually I resolved my issue by running the following command:

$ sudo apt-get purge fonts-symbola ttf-ancient-fonts-symbola

After this I restarted Google Chrome and color emojis finally worked .

xolox
  • 141
  • 4
0

In my case, it is because multiple fonts provide the emoji. I have to remove fonts-emojione to make fonts-noto-color-emoji work.

Another potential font package may cause the conflict is font-noto.

Link to the related bug.

Manh Tai
  • 101
0

Solved by adding Emojis - Emoji Keyboard extension to Chrome.

Additionally, I checked that the Chromoji - Emojis for Google Chrome extension also works.

1st Note: Emojis appear everywhere on the page except for inputs and textarea.

2nd Note: Any of these extensions additionally give us the ability to search for emojis along with the possibility of copying them.

simhumileco
  • 681