How to render NotoColorEmoji on Linux

Question

How to render NotoColorEmoji on Linux

engen0 opened this issue 9 years ago · 124 comments

engen0 commented 9 years ago

I've built the font and uploaded it here but my system is unable to read it.
What do I need to be able to use it?

behdad commented 8 years ago

Thanks.

behdad commented 8 years ago

np :)

ifzm commented 7 years ago

nice :D

Answer 1 · 2015-12-31T15:10:42.000Z

You need latest fontconfig, but also a patched version of cairo from this branch:
https://github.com/behdad/cairo/tree/color-emoji

Unfortunately no one has finished the patch to integrate into cairo yet :(.

Answer 2 · 2016-01-01T17:23:59.000Z

I installed fontconfig, patched cairo, and also freetype, graphite2, harfbuzz, zlib, libpng, libX11, libXrender, and pixman.
I'm still unable to read it though.

Answer 3 · 2016-01-01T17:45:11.000Z

What does this command say, does it find the font:

$ fc-match "Noto Color Emoji"

Answer 4 · 2016-01-01T17:53:28.000Z

No:

$ fc-match "Noto Color Emoji"
Fontconfig warning: "/.fonts.conf", line 185: Having multiple values in isn't supported and may not work as expected
Fontconfig warning: "/.fonts.conf", line 247: Having multiple values in isn't supported and may not work as expected
Fontconfig warning: "/.fonts.conf", line 279: Having multiple values in isn't supported and may not work as expected
Fontconfig warning: "/.fonts.conf", line 301: Having multiple values in isn't supported and may not work as expected
Fontconfig warning: "/.fonts.conf", line 386: Having multiple values in isn't supported and may not work as expected
Fontconfig warning: "/.fonts.conf", line 466: Having multiple values in isn't supported and may not work as expected
Fontconfig warning: "/.fonts.conf", line 533: Having multiple values in isn't supported and may not work as expected
Fontconfig warning: "/.fonts.conf", line 627: saw number, expected matrix
Fontconfig warning: "/.fonts.conf", line 1309: Having multiple values in isn't supported and may not work as expected
Fontconfig warning: "/.fonts.conf", line 1440: Having multiple values in isn't supported and may not work as expected
Fontconfig warning: "~/.fonts.conf", line 1518: Having multiple values in isn't supported and may not work as expected
Fontconfig warning: "/etc/fonts/conf.d/50-user.conf", line 9: reading configurations from ~/.fonts.conf is deprecated.
DejaVuSans.ttf: "DejaVu Sans" "Book"

Answer 5 · 2016-01-01T18:02:06.000Z

Where / how did you install the new fontconfig?

Answer 6 · 2016-01-01T18:03:57.000Z

Got it from here: http://www.freedesktop.org/software/fontconfig/release/
And did
$ sudo ./configure
$ sudo make
$ sudo make install

$ fc-cache -V
fontconfig version 2.11.94

$ ls -l /usr/include/fontconfig/
total 36
-rw-r--r--. 1 root root 1951 Mar 5 2013 fcfreetype.h
-rw-r--r--. 1 root root 4110 Mar 5 2013 fcprivate.h
-rw-r--r--. 1 root root 24060 Mar 5 2013 fontconfig.h

$ ls -l /usr/bin/fc*
-rwxr-xr-x. 1 root root 9792 Mar 5 2013 /usr/bin/fc-cache
-rwxr-xr-x. 1 root root 9780 Mar 5 2013 /usr/bin/fc-cat
-rwxr-xr-x. 1 root root 9728 Mar 5 2013 /usr/bin/fc-list
-rwxr-xr-x. 1 root root 9756 Mar 5 2013 /usr/bin/fc-match
-rwxr-xr-x. 1 root root 9728 Mar 5 2013 /usr/bin/fc-pattern
-rwxr-xr-x. 1 root root 9708 Mar 5 2013 /usr/bin/fc-query
-rwxr-xr-x. 1 root root 9732 Mar 5 2013 /usr/bin/fc-scan

It looks like maybe I have a conflicting old installation

Answer 7 · 2016-01-01T18:15:14.000Z

Yeah, new version probably went into /usr/local. The question is, why does it seem to be trying to read config files from /etc instead of /usr/local/etc

Answer 8 · 2016-01-18T23:40:59.000Z

Hello, I'm also looking into this. But wondering if its even worth it, when chrome does not even support color emoji anyway.

Answer 9 · 2016-01-19T04:48:53.000Z

Hello, I'm also looking into this. But wondering if its even worth it, when chrome does not even support color emoji anyway.

What do you mean? Chrome on Linux certainly supports Noto Color Emoji just fine for me. You might need a newer fontconfig.

Answer 10 · 2016-01-19T08:30:59.000Z

Thank you for getting back to me. I compiled cairo patch from your repo and fontconfig 2.11.94 from http://www.freedesktop.org/software/fontconfig/release/.

vooze@vooze-vb:$ ls -l /usr/include/fontconfig/
total 40
-rw-r--r-- 1 root root 1951 Jan 19 2015 fcfreetype.h
-rw-r--r-- 1 root root 4139 Jan 19 2015 fcprivate.h
-rw-r--r-- 1 root root 24833 Jan 19 2015 fontconfig.h
vooze@vooze-vb:$ fc-match "Noto Color Emoji"
DejaVuSans.ttf: "DejaVu Sans" "Book"
vooze@vooze-vb:~$ fc-cache -V
fontconfig version 2.11.94

Still unable to install the font. Either manually (press Install in font viewer on ubuntu 16.04 daily) or putting it in .fonts dir.
Am I missing something?

Answer 11 · 2016-01-19T11:11:19.000Z

Also just tested. Microsoft color emojis (tested with those, because noto wont install) works in Firefox but is still black/white in Chrome in Linux, like in Windows.

Answer 12 · 2016-01-19T12:03:58.000Z

Try deleting /etc/fonts/conf.d/70-no-bitmaps.conf that I believe Ubuntu puts in there. Though, that shouldn't be needed with latest fontconfig, hence, why I don't know what your problem is.

Answer 13 · 2016-02-15T21:20:48.000Z

@behdad I've compiled the latest fontconfig from git as well as the color-emoji branch from your cairo repo and Noto Color Emoji seems to be working for the most part. However, it seems to have a lower priority than another emoji font? Do you know how I could give Noto a higher priority?

Thanks!

(Apologies for the colors in the screenshot. Not sure why taking a screenshot messes with the colors of the emojis)

Answer 14 · 2016-02-15T21:24:53.000Z

Thats dejavu sans.

Answer 15 · 2016-02-17T02:36:56.000Z

We don't have a good solution to that yet, but one way would be to add this snippet to your ~/.fonts.conf:

<?xml version='1.0'?> 
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'> 
<fontconfig> 
  <match target="pattern"> 
    <edit name="family" mode="prepend"> 
      <string>Noto Color Emoji</string> 
    </edit> 
  </match> 
</fontconfig>

Answer 16 · 2016-02-17T03:44:51.000Z

@behdad Thanks for the reply! I gave that a try (put it in ~/.config/fontconfig/conf.d/10-noto-color-emoji.conf) and it didn't seem to work. I did a export FC_DEBUG=1024 before running Chrome and fontconfig does seem to be loading the file:

╭─   ~/.config/fontconfig/conf.d                                                                  1 ↵  22:42:39 
╰─ export FC_DEBUG=1024
╭─   ~/.config/fontconfig/conf.d                                                                      22:42:44 
╰─ google-chrome-stable
FC_DEBUG=1024
    Loading config file /etc/fonts/fonts.conf
    Scanning config dir /etc/fonts/conf.d
    Loading config file /etc/fonts/conf.d/10-hinting-slight.conf
    Loading config file /etc/fonts/conf.d/10-scale-bitmap-fonts.conf
    Loading config file /etc/fonts/conf.d/10-sub-pixel-rgb.conf
    Loading config file /etc/fonts/conf.d/11-lcdfilter-default.conf
    Loading config file /etc/fonts/conf.d/20-unhint-small-dejavu-sans-mono.conf
    Loading config file /etc/fonts/conf.d/20-unhint-small-dejavu-sans.conf
    Loading config file /etc/fonts/conf.d/20-unhint-small-dejavu-serif.conf
    Loading config file /etc/fonts/conf.d/20-unhint-small-vera.conf
    Loading config file /etc/fonts/conf.d/30-metric-aliases.conf
    Loading config file /etc/fonts/conf.d/30-urw-aliases.conf
    Loading config file /etc/fonts/conf.d/30-win32-aliases.conf
    Loading config file /etc/fonts/conf.d/40-nonlatin.conf
    Loading config file /etc/fonts/conf.d/44-source-han-sans-cn.conf
    Loading config file /etc/fonts/conf.d/44-wqy-microhei.conf
    Loading config file /etc/fonts/conf.d/45-latin.conf
    Loading config file /etc/fonts/conf.d/49-sansserif.conf
    Loading config file /etc/fonts/conf.d/50-user.conf
    Scanning config dir /home/chenxiaolong/.config/fontconfig/conf.d
    Loading config file /home/chenxiaolong/.config/fontconfig/conf.d/10-noto-color-emoji.conf
    Loading config file /home/chenxiaolong/.config/fontconfig/conf.d/10-symbols.conf
    Loading config file /home/chenxiaolong/.config/fontconfig/fonts.conf
    Loading config file /etc/fonts/conf.d/51-local.conf
    Loading config file /etc/fonts/conf.d/57-dejavu-sans-mono.conf
    Loading config file /etc/fonts/conf.d/57-dejavu-sans.conf
    Loading config file /etc/fonts/conf.d/57-dejavu-serif.conf
    Loading config file /etc/fonts/conf.d/60-latin.conf
    Loading config file /etc/fonts/conf.d/65-fonts-persian.conf
    Loading config file /etc/fonts/conf.d/65-nonlatin.conf
    Loading config file /etc/fonts/conf.d/65-wqy-zenhei.conf
    Loading config file /etc/fonts/conf.d/69-unifont.conf
    Loading config file /etc/fonts/conf.d/70-no-bitmaps.conf
    Loading config file /etc/fonts/conf.d/80-delicious.conf
    Loading config file /etc/fonts/conf.d/81-ubuntu.conf
    Loading config file /etc/fonts/conf.d/90-synthetic.conf
    Loading config file /etc/fonts/conf.d/99pdftoopvp.conf

Answer 17 · 2016-02-17T06:53:52.000Z

Humm, I don't know.

Answer 18 · 2016-02-18T21:14:37.000Z

Even with an old version of fontconfig included in Ubuntu Trusty (but with a recent FreeType to support color bitmap fonts that I installed locally), putting the following in your local fontconfig configuration file (e.g. ~/.fonts.conf ) would work (at least, it works well for me with Chrome). The 2nd part below does, only to chrome, what Behdad's snippet (2 days ago) does for all programs so that they should be equivalent as long as chrome is concerned.

 <match target="scan">
   <test name="family">
      <string>Noto Color Emoji</string>
   </test>
   <edit name="scalable" mode="assign"><bool>true</bool></edit>
 </match>

<match target="pattern">
    <test name="prgname">
      <string>chrome</string>
    </test>
    <edit name="family" mode="prepend_first">
      <string>Noto Color Emoji</string>
    </edit>
</match>

Answer 19 · 2016-02-18T21:36:08.000Z

Jungshik: have you got it all working on Ubuntu? If so you you possible post a small "guide"? I Would be truly grateful!

Answer 20 · 2016-02-18T21:39:07.000Z

Wow autocorrect screwed that up. Let me try again:

Jungshik: Have you got it all working on Ubuntu? If so would you possible post a small "guide"? I would be truly grateful! I have tried and failed. :-\

Answer 21 · 2016-03-29T18:15:00.000Z

Hi! I'm interested if there is upstream bug opened for this. Also, is future work on those patches planned? Thanks!

Answer 22 · 2016-03-29T18:42:21.000Z

I subscribed to this issue a while ago hoping for a better fontconfig solution myself. I researched this font/glyph priority issue for far too long and I ended up settling on replacing DejaVu with Bitstream Vera for my emoji font's suggested fontconfig. Bitstream Vera is the source of the DejaVu glyphs and doesn't have any of the conflicting emoji characters. The same process can be adjusted to work for Noto Color Emoji. The only other solution AFAIK is subsetting DejaVu or Noto. Long term, DejaVu or Noto Sans/Serif/etc probably should use the solution Apple & Microsoft went with, as I understand, and not put any emoji (even text-default emoji) characters anywhere except emoji specific fonts. A different solution would be great though.

Edit: Difference vs the @jungshik method is my method is for a system-wide replacement. It may not be applicable for Noto Color Emoji since it doesn't contain regular glyphs.

Answer 23 · 2016-03-29T19:18:12.000Z

@vooze : Do what I wrote in #36 (comment)

Grab the latest version of FreeType from freetype.org and build and install. This is necessary because FreeType on Ubuntu tends to lags behind the upstream and may not have a color font support, yet.
Add my fontconfig snippet to ~/.fonts.conf
Install NotoColorEmoji.ttf : ie copy it where fontconfig looks for fonts. Although not necessary, just run fc-cache
Restart Chrome

Answer 24 · 2016-03-29T19:23:30.000Z

@jungshik, do you have this font working without patched Cairo (you don't mention it in your guide)?

Answer 25 · 2016-03-29T20:58:54.000Z

@abbradar What I wrote is Chrome-specific (pngname matching 'chrome' in fontconfig) and Chrome does not use Cairo.

Answer 26 · 2016-03-29T20:59:35.000Z

@jungshik Ah, I see! Thanks.

Answer 27 · 2016-04-07T00:44:10.000Z

Any progress on this one?

What exactly needs to be done to make color Emojis show up everywhere on Linux (not just in the browser)?

Today Microsoft presented their brand new Emojis for Windows 10, see:

https://blogs.windows.com/windowsexperience/2016/04/06/announcing-windows-10-insider-preview-build-14316/

Yet on Linux desktop operating systems we still don't have full color Emoji support.

Why is that?

Answer 28 · 2016-04-07T01:03:38.000Z

Ugh. I wish emoji die so we don't get so much "any progress on this" messages.

No progress on this. Because apparently no one in the world (including myself) has time to finish my patch. Period. Go bug your Linux distro please.

Answer 29 · 2016-04-07T01:19:35.000Z

Similarly noted on 13rac1/emojione-color-font#30. Agreed and done (full bug).

Answer 30 · 2016-04-07T01:25:27.000Z

Note that I filed this a while back:
https://bugs.launchpad.net/ubuntu/+bug/1543921
No reply. It was just about making sure the fontconfig in Ubuntu is recent enough...

My proof-of-concept cairo patch cannot be shipped as is. It will result in severe performance issues.

Answer 31 · 2016-04-07T01:26:44.000Z

(I'm also a former cairo and cairo-ft maintainer; but cairo's compositors have changed so much since my time that I cannot finish the patch without spending significant amount of time, which has proven hard to justify. The GNOME community knows this, yet no one from Fedora, Endless, etc, has showed up leadership to take this on.)

Answer 32 · 2016-04-07T01:27:42.000Z

@behdad Sorry for my previous bugging and thanks for your work! I'll follow the upstream.

(EDIT: Well, not quite the upstream, but Ubuntu maintainers may want to continue this work)

Answer 33 · 2016-05-26T12:10:04.000Z

The following was tested on 26.05.2016 on Arch Linux with fontconfig version 2.11.95-1, noto-fonts-emoji version 20160714-1 and google-chrome-unstable/google-chrome-dev.

Create the file /etc/fonts/conf.d/01-notosans.conf with the following content:

<?xml version="1.0" ?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <match target="scan">
    <test name="family">
      <string>Noto Color Emoji</string>
    </test>
    <edit name="scalable" mode="assign">
      <bool>true</bool>
    </edit>
  </match>

  <match target="pattern">
    <test name="prgname">
      <string>chrome</string>
    </test>
    <edit name="family" mode="prepend_first">
      <string>Noto Color Emoji</string>
    </edit>
  </match>
</fontconfig>

(Run fc-cache)
Restart Chrome.

Answer 34 · 2016-06-29T20:38:15.000Z

Is is possible to render noto-emojis in Atom on Arch Linux?

Answer 35 · 2016-06-30T10:23:33.000Z

@denysvitali You can ask in the Atom bug/feature tracker.

Answer 36 · 2016-06-30T11:30:07.000Z

@z3ntu As I looked yesterday there is just this bug open atom/atom#8006 and across the issues I read that the problem was related to the Chrome rendering engine. But apparently in Chrome everything works fine.

Answer 37 · 2016-12-03T19:16:46.000Z

I had a lot better luck with this guide, no compiling of anything needed.

Edit: but I did need to add a /etc/fonts/conf.d/01-notoemoji.conf with the content recommended from the external link. Adding @z3ntu's recommendation verbatim resulted in certain fonts, such as on GitHub, being squished together with no spaces between letters.

Answer 38 · 2016-12-22T03:29:46.000Z

I've opened the following bug for Debian to request noto-emoji be integrated as a Debian package: #849042

Answer 39 · 2017-02-24T19:13:40.000Z

I want to know before diving into a deep ocean of configurations for possibly nothing:
Is it possible to render Color Emoji outside of a browser? I'm interested in just having it render like any other font I use.

In Spacemacs, for example, (as of now), whenever I use it to render a character, it's just a transparent square. Should I investigate further and try to have it display outlines or should I just forget it ?

I'm saying that because ⏸ is in Color Emoji, but not in Emoji. I know it because it is displayed (as outline) in Font Manager and Character Map.

I don't know if it's a spacemacs config issue (like, the font registry or something? I don't know anything about low-level font rep, I just ~~trust~~ delegate to my unicode package), or if Color Emoji just can't be displayed.
Maybe I don't have the correct fontconfig either...

I'm on Ubuntu 16.10, basic distribution.

I just want to know if it's possible in the first place. Then I'll try to fiddle.

Answer 40 · 2017-02-25T17:41:07.000Z

Absolutely possible outside of the browser. For example my SSID has emojis and various console based network monitoring tools now show the emojis.

Answer 41 · 2017-02-25T18:46:07.000Z

@jkdf2 Ok good to know.
Thanks.

I'm gonna try and see about changing the font faces in my spacemacs config, or something.

Answer 42 · 2017-03-11T07:19:12.000Z

@jkdf2 colored Emoji, or just monotone fallbacks?

Answer 43 · 2017-03-12T00:09:34.000Z

Has anyone had any luck on embedding COLORED emojis into the terminal?

Answer 44 · 2017-03-12T22:37:22.000Z

@jkdf2 @denysvitali colored emoji are not gonna render in the terminal or other "basic" text outputs (like emacs and such editors). Though I think you can add a font color, but it's still gonna be the monotone outline emojis.

Answer 45 · 2017-03-12T22:42:39.000Z

@FacelessPanda Your statement is absolutely false.

Answer 46 · 2017-03-12T22:55:44.000Z

@Kdex my mind just got blown.
I guess it depends on the system, but mine doesn't do that.

Answer 47 · 2017-03-12T23:15:06.000Z

@denysvitali Yes, it also works in Atom; it has not much to do with the software.
@FacelessPanda If you're on Arch Linux, try @z3ntu's suggestion. If not, try and tailor his suggestion to your distro.

I'll have to admit that support isn't perfect. There are certain characters that won't work (likely because they're not part of the font yet), and some actions that will make them glitch. Most if not all emoji consist of surrogate pairs, which terminals can't handle particularly well. For example, if you try to highlight them in a terminal, you're even able to highlight a single half of the surrogate pair, which will render question marks and make them glitchy. Same goes for trying to delete them with backspace, which breaks the surrogate pair.

If you all you do is print them somewhere and never interact with them, go use them in your terminal. Non-terminal software handles them really well, though.

Answer 48 · 2017-03-12T23:57:22.000Z

Wow @Kdex thanks for the suggestion! I'll definitively try it out as soon as possible, and yes, I use Arch.
Can't wait to get rid of the outlined emojis 😎

Answer 49 · 2017-03-13T18:14:12.000Z

Quick update: I've tested the method mentioned, but was unable to make it work. My goal was to have emojis in both Atom, Konsole and if possible IntelliJ IDEA's console.
Currently I (partially) see them only in Firefox, and most of them are still outlined 😭

Answer 50 · 2017-03-13T23:44:23.000Z

Yeah nothing changed with the fonts .conf files

Answer 51 · 2017-03-14T18:21:18.000Z

I have just tried out @z3ntu's trick on Terminix/Tilix. The results are astounding.

...I should report that to them, right?

Anyway, thanks for the tip!

Edit: nevermind, it's actually a global problem, not limited to Terminix, but also happening on GNOME Shell and apps. The font seems to scale up too much everywhere, at least where Pango is working. Don't know why. Here's an example: https://cloud.githubusercontent.com/assets/2456419/23916458/9190fd8e-08ec-11e7-821b-e5528c23b6f8.png

Answer 52 · 2017-03-22T14:38:05.000Z

@espectalll Any workaround for gnome/gtk applications?

Answer 53 · 2017-05-15T20:06:28.000Z

Fontconfig I use for gnome apps to fix the size:

~/.config/fontconfig/fonts.conf

<?xml version="1.0" ?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <match target="scan">
    <test name="family">
      <string>Noto Color Emoji</string>
    </test>
    <edit name="scalable" mode="assign">
      <bool>true</bool>
    </edit>
    <edit name="pixelsize" mode="assign">
      <double>18</double>
    </edit>
  </match>
</fontconfig>

Problem is they're still grayscale+inverted color, I tried setting the color option to true but that makes them not even render at all. 🤔

Answer 54 · 2017-05-15T20:13:29.000Z

What are you using to render?

Behdad mentions upstream in this thread a patch to cairo that he has. This patch is necessary to get color rendering.

Answer 55 · 2017-05-15T20:20:20.000Z

For those who have issues with some Emoji not being colored: The reason is that certain other fonts have a higher priority, as many other fonts, too, include (grayscale) Emoji characters. So instead of noto-emoji, your computer might use e.g. DejaVu for some Emoji characters. If you want to find out which fonts your computer uses for certain characters, this can easily be checked with DevTools in Chrome. Once you know which fonts are causing trouble, you can give them a lower priority in your fontconfig.

Answer 56 · 2017-05-29T00:51:02.000Z

I was able to get it working pretty much flawlessly on latest OpenSUSE Tumbleweed by doing the following:

Installing packages for greyscale and colour:

sudo zypper in noto-sans-fonts noto-emoji-fonts noto-coloremoji-fonts

Adding this to ~/.config/fontconfig/fonts.conf

<?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="weak">
     <string>Noto Color Emoji</string>
 </edit>
</match>

<match>
 <test name="family"><string>serif</string></test>
 <edit name="family" mode="prepend" binding="weak">
     <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>

And refreshing fc-cache: fc-cache -f -v

Without specifying the fontconfig the emojis will work but will randomly show a mixture of colour/greyscale versions when viewing getemoji.com in Chrome, setting the fontconfig will cause it to properly prioritise colour versions when they are available (e.g. Chrome, Atom) and fall back to greyscale when not (e.g. terminal emulator).

Only issue is the ☺ glyph seems to still use the default font. Not really fussed about that one symbol.

Answer 57 · 2017-05-29T01:23:31.000Z

@wyqydsyq ☺ isn't the only glyph that's missing support with this setup. Symbols such as ❦ ♕ ♛ ♔ ♖ ♜ ☾ → ⇒ ⟹ ⇨ ⇰ ➩ ➪ ➫ ➬ ➭ ➮ ➯ ➲ ➳ ➵ ➸ ➻ ➺ ➼ ➽ ☜ ☟ ➹ ➷ ↶ ↷ ✆ ⌘ ⎋ ⏎ ⎈ ⎌ ⍟ ❥ ツ ღ ☻ don't have support either (they can be found in the bottom section of getemoji.com). Also, your setup might destroy GTK-based applications, since it doesn't account for scaling:

Answer 58 · 2017-06-09T01:31:50.000Z

I think you can try this #53
I use this program to perfectly solve the color display emoji in the terminal :D

Answer 59 · 2017-07-07T03:32:48.000Z

Figured I'd share my (mostly) working config for Debian Stretch. Two issues outstanding: a few of the emojis have the gender symbol next to them instead of the gender specific version, and the title bar emoji are grayscale.

I have NotoColorEmoji.ttf in my .fonts directory.

I have the following in .config/fontconfig/fonts.conf

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>

  <match target="scan">
    <test name="family">
      <string>Noto Color Emoji</string>
    </test>
    <edit name="scalable" mode="assign">
      <bool>true</bool>
    </edit>
    <edit name="pixelsize" mode="assign">
      <double>18</double>
    </edit>
  </match>

  <match>
 <test name="family"><string>sans-serif</string></test>
 <edit name="family" mode="prepend" binding="weak">
 <string>Noto Color Emoji</string>
 </edit>
 </match>

<match>
 <test name="family"><string>serif</string></test>
 <edit name="family" mode="prepend" binding="weak">
 <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>

</fontconfig>

I ran fc-cache -f and this was the result:

Answer 60 · 2017-07-29T16:45:55.000Z

We finally committed cairo patchset to master branch upstream. Now we just need a release and then wait a few more years for it to reach distributions...

Answer 61 · 2017-07-30T09:47:45.000Z

@behdad So we don't need any special configuration with the new cairo version and we'll get color emoji?

Answer 62 · 2017-07-30T14:34:44.000Z

@z3ntu We don't need to install a patched cairo. The step of configuring Noto Color Emoji as default font is still needed.

Answer 63 · 2017-07-31T14:40:42.000Z

@z3ntu We don't need to install a patched cairo. The step of configuring Noto Color Emoji as default font is still needed.

Correct. We are working on that. Follow progress here:

https://bugs.freedesktop.org/show_bug.cgi?id=94551
https://bugzilla.gnome.org/show_bug.cgi?id=785566

Answer 64 · 2017-07-31T22:06:53.000Z

@z3ntu We don't need to install a patched cairo. The step of configuring Noto Color Emoji as default font is still needed.

Correct. We are working on that. Follow progress here:

https://bugs.freedesktop.org/show_bug.cgi?id=94551
https://bugzilla.gnome.org/show_bug.cgi?id=785566

Both fixed now in their master branches.

Answer 65 · 2017-08-01T15:14:01.000Z

Okay if everything is released, it should work out of the box if one of the emoji fonts is installed?

Answer 66 · 2017-08-01T17:03:46.000Z

Okay if everything is released, it should work out of the box if one of the emoji fonts is installed?

Correct. On GNOME.

Answer 67 · 2017-08-02T05:45:14.000Z

Thanks for the info.

Answer 68 · 2017-08-03T05:33:36.000Z

@behdad Great work, thanks!

Answer 69 · 2017-08-21T03:51:06.000Z

@wyqydsyq can you use color emoji in your terminal? I noticed that from your screenshot, color emoji only works in google chrome, atom. In terminal, it is just black-white emoji.

Answer 70 · 2017-08-22T01:35:30.000Z

@rain1024 You may need a Cairo patch :D

Answer 71 · 2017-08-22T02:03:16.000Z

@ifzm thank you so much. I missed Cairo. I installed it by follow this tutorial notwaldorf/ama#53 (comment). Now I have color emojis in my terminal. But colors of emojis looks strange.

Do I still miss some config?

Answer 72 · 2017-08-27T17:37:34.000Z

@rain1024 that looks like "inverted" colors.

Check the preferences in your terminal app. It's probably under "theme" or "appearance" or "colors," etc. Maybe the black-on-white theme is coded to display by inverting the colors from a white-on-black theme, in which case you should try a theme with white text on whichever background color you prefer, for starters.

Answer 73 · 2017-09-15T00:42:36.000Z

FYI to Arch Linux users:

The above instructions are no longer accurate. The noto-color-emoji package now provides a built-in config file that you should use to enable color emoji support on github (and other sites that lack it).

To do it, all you need to do is the following:

$ cd /etc/fonts/conf.d
$ sudo ln -s ../conf.avail/66-noto-color-emoji.conf

Hope that helps! (The old way will break font rendering in chrome. Be careful!)

Answer 74 · 2017-09-15T04:58:31.000Z

Does anyone have any idea when this patch to Cairo will start making it upstream and into distro repositories?

I'm using OpenSUSE Tumbleweed so can't install the prepatched cairo .deb linked previously

Answer 75 · 2017-09-15T05:00:52.000Z

Does anyone have any idea when this patch to Cairo will start making it upstream and into distro repositories?

All patches are upstream (and even in releases!) now. Just need to trickle down to distros.

Answer 76 · 2017-09-16T22:32:25.000Z

@dsifford thanks, that fixed my chrome fonts rendering.

although some pages stopped working, like instagram and on all input fields (archlinux)

Answer 77 · 2017-09-16T22:40:34.000Z

😄 it's working again,

After doing this: #36 (comment)
I created the file ~/.config/fontconfig/fonts.conf with the contents mentioned in: notwaldorf/ama#53 (comment)

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>

<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>monospace</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>

</fontconfig>

then fc-cache -f -v and now it's working fine!!

Answer 78 · 2017-09-17T23:21:47.000Z

Can confirm it's now working in current OpenSUSE Tumbleweed, cairo2 update got released the other day with the patch, I now have full colour emojis across all GTK apps! 🎉

Also here's a handy extension for those of you using GNOME 3: https://extensions.gnome.org/extension/1162/emoji-selector/

Answer 79 · 2017-09-18T15:58:37.000Z

https://blogs.gnome.org/mclasen/2017/08/18/post-guadec-distractions/

Answer 80 · 2017-09-19T00:00:40.000Z

I'm on Ubuntu w/ XFCE and used the most recent font config file I could find ( https://hastebin.com/xamuquvaba.xml ) and it causes some issues with numbers in firefox (and a few other programs)...

am I missing something here?

Answer 81 · 2017-09-19T23:54:12.000Z

@Noahkiq it's an issue with priorities in your fontconfig, noto needs to be used only as a fallback, never taking priority over other fonts. Try changing the binding attributes in your fontconfig file for the sans and sans-serif families to weak, if that doesn't work also try changing the mode attributes to append.

Here's my ~/.config/fontconfig/fonts.conf:

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>

  <match target="scan">
    <test name="family">
      <string>Noto Color Emoji</string>
    </test>
    <edit name="scalable" mode="assign">
      <bool>true</bool>
    </edit>
    <edit name="pixelsize" mode="assign">
      <double>18</double>
    </edit>
  </match>

  <match>
 <test name="family"><string>sans-serif</string></test>
 <edit name="family" mode="prepend" binding="weak">
 <string>Noto Color Emoji</string>
 </edit>
 </match>

<match>
 <test name="family"><string>serif</string></test>
 <edit name="family" mode="prepend" binding="weak">
 <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>

</fontconfig>

Answer 82 · 2017-09-20T01:18:48.000Z

With latest fontconfig you shouldn't need any custom config anymore.

Answer 83 · 2017-09-20T01:18:56.000Z

Going to finally close this.

Answer 84 · 2017-09-20T08:12:50.000Z

With fontconfig 2.12.5-1 on Arch Linux after removing the file ~/.config/fontconfig/fonts.conf and running sudo fc-cache -f -v, the website getemoji.com looks like that:

The rendered fonts are
Liberation Serif—Local file(2803 glyphs)
Noto Emoji—Local file(2001 glyphs)
DejaVu Sans—Local file(1579 glyphs)
Liberation Sans—Local file(991 glyphs)
Noto Color Emoji—Local file(591 glyphs)
Noto Sans Symbols—Local file(31 glyphs)
FreeMono—Local file(4 glyphs)
IPAGothic—Local file(1 glyph)

according to the Chrome Dev Tools

Answer 85 · 2017-10-09T15:45:34.000Z

Yeah I get same result on getemoji.com 😟

Answer 86 · 2017-11-10T11:43:27.000Z

After many hours of trial and error, I was finally able to get emoji support across all apps under Arch Linux running i3wm (no GNOME). @dsifford's comment #36 (comment), required for step 3, was very helpful! Here are the steps to follow in case anyone else is still having issues:

Install the font package with sudo pacman -S noto-fonts-emoji.
Create the file $HOME/.config/fontconfig/fonts.conf with the following configuration:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <match>
    <test name="family">
      <string>serif</string>
    </test>
    <edit name="family" mode="prepend" binding="weak">
      <string>Noto Color Emoji</string>
    </edit>
  </match>

  <match>
    <test name="family">
      <string>sans-serif</string>
    </test>
    <edit name="family" mode="prepend" binding="weak">
      <string>Noto Color Emoji</string>
    </edit>
  </match>

  <match>
    <test name="family">
      <string>monospace</string>
    </test>
    <edit name="family" mode="prepend" binding="weak">
      <string>Noto Color Emoji</string>
    </edit>
  </match>
</fontconfig>

sudo ln -s /etc/fonts/conf.avail/66-noto-color-emoji.conf /etc/fonts/conf.d/66-noto-color-emoji.conf
In the event that /etc/fonts/conf.avail/66-noto-color-emoji.conf doesn't exist, here are the contents:

<?xml version="1.0" ?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <match target="scan">
    <test name="family">
      <string>Noto Color Emoji</string>
    </test>
    <edit name="scalable" mode="assign">
      <bool>true</bool>
    </edit>
  </match>

  <!-- Add emoji generic family -->
  <alias binding="strong">
    <family>emoji</family>
    <default><family>Noto Color Emoji</family></default>
  </alias>

  <!-- Alias requests for the other emoji fonts -->
  <alias binding="strong">
    <family>Apple Color Emoji</family>
    <prefer><family>Noto Color Emoji</family></prefer>
    <default><family>sans-serif</family></default>
  </alias>
  <alias binding="strong">
    <family>Segoe UI Emoji</family>
    <prefer><family>Noto Color Emoji</family></prefer>
    <default><family>sans-serif</family></default>
  </alias>
  <alias binding="strong">
    <family>EmojiOne Color</family>
    <prefer><family>Noto Color Emoji</family></prefer>
    <default><family>sans-serif</family></default>
  </alias>
</fontconfig>

Force refresh the font configuration cache with fc-cache -vf.
Restart all the applications where you would like to use emoji.

@z3ntu I think it'd be a good idea to include the short configuration found in step 2, or something similar, in the /etc/fonts/conf.avail/66-noto-color-emoji.conf file that comes included with the pacman package. Then, we could link it to /etc/fonts/conf.d/66-noto-color-emoji.conf at the install process. That would allow users with the package installed to have emoji support under all apps without requiring further action.

Answer 87 · 2017-11-10T21:36:18.000Z

@wilmerpaulino thanks for the tutorial, emoji work, but that also messes up how numbers are displayed for me all over the system.
They are some weird "hollow" white things
Seems like emoji are too high on the priority list over "sane" fonts that way.

Answer 88 · 2017-11-11T10:32:20.000Z

This is how I solved color emoji problem on archlinux

[ugjka@archee ~]$ cat /etc/fonts/conf.d/50-noto-color-emoji.conf 
<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>

  <match target="scan">
    <test name="family">
      <string>Noto Color Emoji</string>
    </test>
    <edit name="scalable" mode="assign">
      <bool>true</bool>
    </edit>
    <edit name="pixelsize" mode="assign">
      <double>18</double>
    </edit>
  </match>

  <match>
 <test name="family"><string>sans-serif</string></test>
 <edit name="family" mode="prepend" binding="weak">
 <string>Noto Color Emoji</string>
 </edit>
 </match>

<match>
 <test name="family"><string>serif</string></test>
 <edit name="family" mode="prepend" binding="weak">
 <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>

</fontconfig>

Note the path of the file and filename: /etc/fonts/conf.d/50-noto-color-emoji.conf

remove $HOME/.config/fontconfig/fonts.conf if you followed the advice above it messes things up

Answer 89 · 2017-11-18T00:36:09.000Z

For those who are claiming they have a working configuration, can you confirm emojis appear with their proper size in thunderbird? And not like this:

Answer 90 · 2017-11-18T21:08:48.000Z

I believe Mozilla fixed that.

Answer 91 · 2017-11-19T00:18:53.000Z

Firefox used to have this issue and Mozilla fixed it, but it's still present on current Thunderbird.
I am using ArchLinux with fontconfig version 2.12.6 and Thunderbird 52.4.0.
But any configuration combinations I try, I either get the DejaVu or those huge ones.

@DeeDeeG forgot about this, seems to be fixed now. Thanks.

Answer 92 · 2017-11-19T02:05:40.000Z

Thunderbird is based on the Firefox ESR (Extended Support Release) version. Looks like Thunderbird's major version will be updated to ~~59.0~~ 60 around ~~March or April~~ May or June 2018. (Thunderbird releases lag behind Firefox ESR releases anywhere from 10 days to around a month it seems.) https://wiki.mozilla.org/RapidRelease/Calendar#Future_branch_dates

You can expect the fix when Thunderbird 59 60 comes out, but unfortunately it's probably not urgent enough for them to address it any earlier. You can file a bug with them anyway if you like:
https://bugzilla.mozilla.org/ (File under "Product: Thunderbird")

Edit Jan 4 2018: @rafasc there's actually a beta (Thunderbird 58 as of my writing this) if anyone wants to try it. It should support emoji as well as Firefox does, but I haven't personally tried it. https://www.thunderbird.net/en-US/channel/

Edit Feb 11 2018: Next Firefox ESR version is 60, not 59.

Answer 93 · 2017-11-26T21:43:35.000Z

Is there any way to have color emoji work while also having embedded bitmaps disabled for certain fonts? I had to disable them in my .fonts.conf due to issues with Calibri and Cambria, but with the bitmaps disabled, emoji just become invisible. With the bitmaps re-enabled, color fonts work, but Calibri looks like this at small font sizes:

Answer 94 · 2017-11-29T07:12:03.000Z

Having mixed success with this on Debian Buster (Testing).

The good news is that I've confirmed that I can get color emoji in terminal windows (LXDE/lxterminal), using stock packages provided by Debian Buster, without any special hacks or fontconfig edits.

The bad news is that things don't quite work as hoped in Chrome and Firefox. The fonts will certainly render if explicitly specified, but they don't seem to be used consistently as the default "fallback" fonts for emojis.

Looking at getemoji.com, and looking at the rendered fonts for the "Smileys & People" <p> element, I see the following fonts being used for each browser:

Firefox (57.0):
- DejaVu Sans
- DejaVu Serif
- EmojiOne Mozilla
- FreeSerif
- Noto Sans Symbols2 Regular
Chrome (62.0.3202.94):
- DejaVu Sans
- FreeSerif
- Liberation Serif
- Noto Emoji
- Noto Sans Symbols2

I haven't dug deeply enough to figure out why these fonts are being used in preference to the Noto fonts. For personal use I can kind of hack things to mostly work as expected by using something like this, but this doesn't feel right, plus it still seems to miss a few characters compared to if I were to explicitly specify the Noto Color Emoji font family.

Answer 95 · 2017-11-29T07:17:55.000Z

The bad news is that things don't quite work as hoped in Chrome and Firefox. The fonts will certainly render if explicitly specified, but they don't seem to be used consistently as the default "fallback" fonts for emojis.

Right. Firefox and Chrome need to ask for font family "emoji" and language "und-zyse" when querying font for emoji. Either of those should do. Doing both is best. I know there's a Chrome bug for that. cc @jfkthame @drott

Answer 96 · 2018-01-10T00:11:46.000Z

Not working for me on Debian Buster. After updating libcairo2 to 1.15.8-3 I got glyphs from Noto Color Emoji accounted by default (previously only Symbola glyphs were used), but none of them are displayed.

Getting the same behavior in other GTK+3 applications as well. I tried overriding scalable and embeddedbitmap settings of fontconfig to true, tried @ugjka's solution as-is, but nothing helps. Maybe this is a bug in Cairo?

Answer 97 · 2018-01-10T00:31:03.000Z

@bodqhrohro You shouldn't need to touch fontconfig at all for the Noto Color Emoji font to work in Debian Buster. But don't use gucharmap or a browser or LIbreOffice to test it. Try the GNOME Characters app and an app like the gedit Text Editor.