Are you fed up of not being able to see color emoji in Google Chrome on Linux? If so, I’m about to make your day.
Well, more precisely, ’emojineer’ and Googler Monica Dinculescu is.
Monica has hit upon a way to get full-color, Unicode 9.0-supporting emoji looking like they should in Chrome (and other Chromium related browsers) for Linux.
As someone who’s worked on Google Chrome, and just so happens to be a big, big fan of the zany colorful glyphs some of us love to hate, Monica was the ideal person to figure it out.
Her solution is surprisingly simple, truth told: install Google’s free Noto Color Emoji font on Linux.
Wait, Haven’t I Already Done This?
If you’re a regular reader then you may have read our earlier articles showing you how to enable color emoji in Firefox.
That tutorial was made possible by the stellar open-source project EmojiOne Color Font. That font, which is now available to install on Ubuntu through a PPA, uses the power of the SVG-in-OpenType font to render color emoji on Linux in Mozilla Firefox, Thunderbird, plus other Gecko apps and some Qt5-based ones too.
But the problem has always been that, well, Firefox is not everyone’s web browser of choice, and not every application supports SVG-in-OT fonts — hence this post!
But it’s not just for Chrome’s benefit. The monochromatic emoji rendering in GTK+ apps is far from nice.
Here’s how an Emoji-stuffed tweet in GTK+ app Corebird looks out of the box, with emojione-svginot and with Noto color emoji:
How To Enable Color Emoji in Chrome for Linux
(And Better Looking Monochrome Emoji in GTK+ Apps)
What follows isn’t for the faint-hearted or the terminal averse. You’ll need to roll up your sleeves and do a bit of manual jiggery-pokery (that’s the official technical term) to get emoji beaming.
If you have the fonts-emojione-svginot font installed you MUST remove it before continuing. Got it?
1. Download the Google Noto Colour Emoji font.
This font is distributed as a free .tff file and is licensed under the SIL Open Font License.
Extract the zip archive (once it’s finished downloading) and move the NotoColorEmoji.tff file to the (hidden) ~/.fonts/ directory in your Home folder. If this folder isn’t there you’ll need to create it.
2. Create a font-config
You cannot skip this step.
You need to create the following font-config file so that the Ubuntu desktop (and the apps that run on it) know which emoji font to load by default. Without this you’ll only see colourful emoji for newer characters not covered by ttf-ancient-symbola.
First part to this is to create a fontconfig folder in the local config directory:
mkdir -p ~/.config/fontconfig/
Next, enter the following text into the terminal:
cat << 'EOF' > ~/.config/fontconfig/fonts.conf
Paste the code excerpt below into the Terminal, being careful not to alter a single character:
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE fontconfig SYSTEM "fonts.dtd"> <match> <test name="family"><string>sans-serif</string></test> <edit name="family" mode="prepend" binding="strong"> <string>Noto Color Emoji</string> </edit> </match> <match> <test name="family"><string>serif</string></test> <edit name="family" mode="prepend" binding="strong"> <string>Noto Color Emoji</string> </edit> </match> <match> <test name="family"><string>Apple Color Emoji</string></test> <edit name="family" mode="prepend" binding="strong"> <string>Noto Color Emoji</string> </edit> </match>
Type EOF and hit enter to save.
All that’s left to do now is flush the font cache so that apps know there’s a new font to use. Do this by running:
fc-cache -f -v
If you had Google Chrome, Vivaldi, Corebird or any other apps open during this process you (may) need to restart them for the colourful emoji characters to show up.
To test that you installed the font correctly open the following emoji demo page in Google Chrome (or Chromium, Vivaldi, Min, whatever).
Issues
There are downsides.
You may find some GTK desktop applications have issues displaying regular text correctly after following this tutorial. Share your experiences in the comments. You can undo the changes by deleting the fontconfig, deleting the Noto Color Emoji font, and flushing the font cache (basically reversing the entire process).
Apps that I’ve noticed don’t play nice when this has been applied include Geary (message body is all garbled), Thunderbird, Geany and some pages in Firefox display incorrectly.