18.04: color emoji not showing up at all in Chrome, only partially in Firefox

Question

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:

Firefox:

nuno · Answer 1 · 2020-01-31T19:07:31.110

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

edited Jan 31 '20 at 19:07

answered Dec 16 '19 at 15:13

nuno

937

This worked perfectly for 19.04 – naisanza Dec 19 '19 at 13:17
same here, did the trick – rolebi Dec 20 '19 at 14:27
2

thx guy! have to do this another time after a while. Don't know why this font package get "corrupted"... – Seboudry Dec 23 '19 at 10:10
7

This solution does not work after Restart. – Akshar Patel Dec 29 '19 at 07:45
@AksharPatel it has been working for me. Perhaps try to reinstall Chrome altogether and reinstalling the font packs afterwards would help. – nuno Jan 06 '20 at 13:51
3

when you restart the problem comes back again :( – Victor Jan 09 '20 at 10:35
1

Well, it worked for me. Now, it'd be rather interesting to know why... – Mark Amery Jan 10 '20 at 12:11
1

The same can be achieved with a single command: sudo apt-get install --reinstall fonts-noto-color-emoji
Whatever method any of you use, It is required to restart your browsers after reinstall of fonts package. Firefox and Chrome Emojis are back!
– user3789797 Jan 25 '20 at 20:50
This only temporarily fixes the problem. I just reinstalled it again yesterday, and today emoji were broken again in both Chrome and Brave. – mxk Jan 31 '20 at 06:52
@Matthias Happened to me as well. Unsure why I had to reinstall again. I can't really remember if I did updates that could have changed anything. – user3789797 Feb 13 '20 at 14:11
1

Related bug report: https://bugs.launchpad.net/ubuntu/+source/fonts-noto-color-emoji/+bug/1859926 – user3789797 Feb 18 '20 at 20:24
3

Reinstall and restart Chrome worked on an out-of-the-box 20.04 install. Bizarre, but it works! – nlawson May 16 '20 at 19:49
Worked at Debian 5.10.140-1, 2022. thanks, brilliant answer. – William Martens Oct 04 '22 at 11:00

score 55 · Answer 2 · edited May 17 '18 at 12:25

55

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.

edited May 17 '18 at 12:25

Treviño

2,584

answered Apr 29 '18 at 12:09

N3dst4

1,453

-1, because of two reasons: 1) the local fontconfig isn't required any longer in 18.04. 2) "installing Noto font was unnecessary since it's installed as part of 18.04 by default" isn't universally true. I have a full KDE desktop installation and it wasn't installed at all. See also my answer. – gertvdijk Jul 25 '18 at 15:00
2

Do you know if that's all true for upgradees too? I sensed that my problems might have had to do with being a 17.10 upgrade. – N3dst4 Jul 25 '18 at 15:08
2

I'm using Kubuntu 18.04 and after installing The Noto Fonts I still had the same problem. However, this did the trick for me. Unfortunately, I'm not sure if it was the config file or simply the call to "fc-cache" which caused the change. Maybe both were needed. – andypotter Oct 24 '18 at 16:54
This fixed emoji in Chrome but unfortunately broke them in Anki. Ultimately I had to revert it altogether to avoid the side effects. – undercat Dec 21 '18 at 10:14
This did not have any effect on Pop_OS 19.10. – mxk Jan 31 '20 at 06:55
I need both installing font and fontconfig to fix in Xfce, not only in Chrome, but also in Brave and Terminal. – Polv Sep 16 '20 at 09:10

gertvdijk · Accepted Answer · 2018-07-26T21:25:55.987

30

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.}

edited Jul 26 '18 at 21:25

answered Jul 25 '18 at 14:54

gertvdijk

67,947

12

This didn't work for me. I'm using Ubuntu 18.04 with Chrome v71 from Google's official repository. The other answer did do the trick. – undercat Dec 18 '18 at 11:33
3

@undercatapplaudsMonica there are multiple other answers now. – kynan Jan 30 '20 at 07:40
Which other answer? – sergiomafra Mar 11 '20 at 16:45

score 5 · Answer 4 · answered May 13 '18 at 18:08

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.)

answered May 13 '18 at 18:08

Jeremy Bicha

8,234

Fair enough, but this is not an answer to the original question - how to enable color emojis in Chrome. – gertvdijk Jul 25 '18 at 14:58
@gertvdijk Color emoji does work in Google Chrome. What specific web site is causing you a problem? – Jeremy Bicha Jul 26 '18 at 15:04
Ok, I see that you fixed your issue by installing fonts-noto-color-emoji. I tried to get every Ubuntu 18.04 LTS flavor to include that package by default, but the Lubuntu and Kubuntu developers didn't want it. – Jeremy Bicha Jul 26 '18 at 15:05
@Jeremy_Bicha Yeah, on Kubuntu. But, my point was, your 'answer' is more of a comment to the other answer about the test page to use. It doesn't really answer the Q/OP. – gertvdijk Jul 26 '18 at 21:23
1

Your link is misleading because it has a font-family CSS rule for the "Browser" column that includes specific fonts like "Noto Color Emoji". The majority of websites are not going to have that CSS rule. So for me emoji renders fine on your link with the fonts-noto-color-emoji package installed, until I disable that CSS rule then they don't. If I copy+paste some emoji from your link to gedit or a terminal window, some render fine and some don't (e.g. U+2603 ☃ doesn't work while U+26C4 ⛄ does). – Abe Voelker Sep 02 '18 at 02:36
@AbeVoelker Exactly, my problem is emojis renders well when the font family is specified. If not, only partially are rendered and my rendered set is different than OP's screenshot. – Daniel Cheung Jan 15 '20 at 21:39

Alberto Salvia Novella · Answer 5 · 2020-06-01T10:57:32.167

4

I use emoji.conf.

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

edited Jun 01 '20 at 10:57

answered May 27 '20 at 10:05

Alberto Salvia Novella

702

1

this is the only solution that worked for me on 20.04. the installer didn't work though. i had to manually copy both files in /root/etc/fonts to my own /etc/fonts/. upon restarting chrome i finally had emojis. thanks! – rmanna May 30 '20 at 13:51
Oh, what happens when you run the installer? – Alberto Salvia Novella May 30 '20 at 16:31
very weird. i just ran your installer again to send you the error and it worked fine ‍♀️ – rmanna Jun 01 '20 at 04:16
Link updated, so now it works with any emoji font. – Alberto Salvia Novella Jun 01 '20 at 11:01
@AlbertoSalviaNovella Any more details on how to use this tool? Or do i just have to install it and I'm done? – LetsFailNoob Jun 17 '20 at 12:51
@LetsFailNoob Guess why these files names: "install-uninstall.sh", "_font.txt" – Alberto Salvia Novella Jun 17 '20 at 18:41
@AlbertoSalviaNovella I mean yeah should be pretty clear, but since nothing changed after installing I was wondering whether or not I did something wrong. – LetsFailNoob Jun 23 '20 at 19:14
@LetsFailNoob You also need to install the emoji font. – Alberto Salvia Novella Jun 24 '20 at 00:14
@AlbertoSalviaNovella A Build-newby-question: What are the steps to run this tool? – Filbuntu Sep 29 '20 at 14:11
@Filbuntu If your distro exhibit problems with emoji, you are better asking them to include this tool in their packages. The package maintainer will know what to do. – Alberto Salvia Novella Sep 30 '20 at 16:42
1

Thanks bro for the information this really worked for me as i wanted just downloaded the project and run the install-uninstall.sh and the problem get solved – code by Abhishek Bharti Mar 29 '21 at 15:18
Great – Alberto Salvia Novella Mar 30 '21 at 15:38

score 3 · Answer 6 · answered Jun 09 '19 at 00:23

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

Make sure you have fonts-noto-color-emoji package installed.
```
sudo apt install fonts-noto-color-emoji
```

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>

Set default fonts in Chrome to variations of "Noto".
Rebuild font cache + restart chrome.
```
fc-cache -f -v
```
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.

score 1 · Answer 7 · answered Aug 08 '20 at 01:49

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 .

Manh Tai · Answer 8 · 2020-07-17T07:23:33.810

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.

edited Jul 17 '20 at 07:23

answered Jul 17 '20 at 04:19

Manh Tai

101

simhumileco · Answer 9 · 2022-04-28T14:43:01.083

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.

edited Apr 28 '22 at 14:43

answered Apr 25 '22 at 13:57

simhumileco

671

18.04: color emoji not showing up at all in Chrome, only partially in Firefox

9 Answers9

Linked

Related