Updated: 2019-01-18 04:26:47 CST +08

Make Emoji Colorful on Chrome in Ubuntu Linux

I have try NotoColorEmoji.tff but emojis are not complete, and twemoji-color-font is only support firefox.

Finally, I found EmojiOne Fonts could be completed my requirement.

Installation Steps

  1. Download newest emojione-android.ttf from emojione-assets
  2. Move emojione-android.ttf to ~/.local/share/fonts/
  3. Create 70-emojione-color.conf in /etc/fonts/conf.avail/

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE fontconfig SYSTEM "fonts.dtd">
    <fontconfig>
    
    <!-- Add emoji generic family -->
    <match target="pattern">
        <test qual="any" name="family"><string>emoji</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>
    
    <!-- Aliases for the other emoji fonts -->
    <match target="pattern">
        <test qual="any" name="family"><string>Apple Color Emoji</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>
    
    <match target="pattern">
        <test qual="any" name="family"><string>Segoe UI Emoji</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>
    
    <match target="pattern">
        <test qual="any" name="family"><string>Segoe UI Symbol</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>
    
    <match target="pattern">
        <test qual="any" name="family"><string>EmojiOne</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>
    
    <match target="pattern">
        <test qual="any" name="family"><string>Emoji One</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>
    
    <match target="pattern">
        <test qual="any" name="family"><string>Android Emoji</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>
    
    <match target="pattern">
        <test qual="any" name="family"><string>NotoColorEmoji</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>
    
    <match target="pattern">
        <test qual="any" name="family"><string>Noto Emoji</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>
    
    <match target="pattern">
        <test qual="any" name="family"><string>Twemoji</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>
    
    <match target="pattern">
        <test qual="any" name="family"><string>EmojiSymbols</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>
    
    <match target="pattern">
        <test qual="any" name="family"><string>Symbola</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>
    
    <!-- Do not allow any app to fallback to Symbola, ever -->
    <selectfont>
        <rejectfont>
        <pattern>
            <patelt name="family">
            <string>Symbola</string>
            </patelt>
        </pattern>
        </rejectfont>
    </selectfont>
    </fontconfig>
    
  4. Create symbolic link to enable font config

    sudo ln -s /etc/fonts/conf.avail/70-emojione-color.conf /etc/fonts/conf.d/70-emojione-color.conf
    
  5. Regenerate font cache

    fc-cache -vf
    
  6. Restart Chrome

  7. Try it on unicode full emoji list

Reference