Learn How To Enable Color Emoji on Chrome for Linux

If you are fed up of not being able to see color emoji in Google Chrome on Linux then today is your day and it’s thanks to Googler and ’emojineer’, Monica Dinculescu.

Monica has discovered a way to get full-color, Unicode 9.0-supporting emoji to look the way they should in Chrome and other Chromium related browsers for Linux.

emoji-color-linux

Monica is the ideal person to figure the problem out as she has worked on Google Chrome and is a mighty fan of the zany colorful glyphs that usually receives sweet and sour user reviews from time to time. Her solution is surprisingly a simple; install Google’s free Noto Color Emoji font on Linux.

Wait, Haven’t I Already Done This?

The stellar open-source project EmojiOne Color Font made possible a tutorial on how to enable color emoji in Firefox, and that font – which is now available to install via a PPA on Ubuntu is powered by the SVG-in-OpenType font, which renders color emoji on Linux in Mozilla Firefox, Thunderbird, and other Gecko apps, including some Qt5-based ones too.

The problem, however, has always been that not everyone uses Firefox, and not every application supports SVG-in-OT fonts – but that’s why you have us to help you out.

Apart from the set-up being to the benefit of Chrome, the monochromatic emoji rendering in GTK+ apps is beautiful to behold. See how an “Emojified” tweet in GTK+ app Corebird looks like with emojione-svginot and with Noto color emoji:
emoji-fonts-in-gtk-apps

Enabling Color Emoji in Chrome for Linux
Before we begin: If you already have the fonts-emojione-svginot font installed you MUST remove it before going on with this guide. Set? Now the steps:

  1. Download the Google Noto Colour Emoji font.
    This font is licensed under the SIL Open Font License and is distributed as a free .tff file.
    After downloading it from here, extract the zip archive and move the NotoColorEmoji.tff file to the (hidden) ~/.fonts/ directory in your Home folder. If this folder isn’t there then you will need to create it.
  2. You cannot skip this step.

    You need to create the following font-config file so that your Ubuntu desktop (and the apps that run on it) will know which emoji fonts to load by default. Without this, you will see only colourful emoji for newer characters not covered by ttf-ancient-symbola.

    So create a fontconfig folder in the local config directory:

    mkdir -p ~/.config/fontconfig/

    Then enter the following text into the terminal:

    cat << 'EOF' > ~/.config/fontconfig/fonts.conf

    Paste the code excerpt below into the Terminal. Be careful not to alter any 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.

    Flush the font cache so by running the code below:

    fc-cache -f -v

    The flushing is for your apps to know there’s a new font to use.

    If you had any apps open during this process you may need to restart them in order for the emoji characters to show up.

    Test that you installed the font correctly by opening the Emoji Demo Page in Google Chrome (or any other browser).

Possible Issues

This tweak isn’t without downsides.
You may find some GTK desktop applications have issues displaying regular text correctly after following this tutorial. Undo the changes by deleting the fontconfig, deleting the Noto Color Emoji font, and flushing the font cache (basically reversing the entire process).

We hope this guide was helpful and don’t forget to leave your comments below. Feel free to drop questions if you have any or if you need any help with the process.

About The Author
Okoi Martins Jr.
I'm a Computer Scientist with a passion for learning new things in fields ranging from theoretical implications of computer science and mathematical modeling to web development and music. In my spare time, I listen to music, read like a compiler, and learn like an A.I algorithm.

Leave a Response