Twitter Color Emoji SVGinOT Font

A color and B&W emoji SVG-OpenType / SVGinOT font built from theTwitter Emoji for Everyone artwork with support for ZWJ,skin tone diversity and country flags.

The font works in all operating systems, but will currently only show coloremoji in Firefox, Thunderbird, Photoshop CC 2017+, and Windows Edge V38.14393+.This is not a limitation of the font, but of the operating systems andapplications. Why doesn't it work on Chrome? Regular B&Woutline emoji are included for backwards/fallback compatibility.

Table of Contents

• Examples
• What is SVGinOT?
• Install on Linux
• Install on MacOS
• Install on Windows
• Uninstalling
• Building
• License

Examples

Demo in Firefox on Linux.

What is SVGinOT?

SVG in Open Type is a standard by Adobe and Mozilla for color OpenTypeand Open Font Format fonts. It allows font creators to embed complete SVG fileswithin a font enabling full color and even animations. There are more detailsin the SVGinOT proposal and the OpenType SVG table specifications.

SVGinOT Font demos (Firefox only):

• https://hacks.mozilla.org/2014/10/svg-colors-in-opentype-fonts/
• https://xerographer.github.io/reinebow/
• https://xerographer.github.io/multicoloure/

Install on Linux

The font can be installed for a user or system-wide. Get the latest versionfrom releases: https://github.com/eosrei/twemoji-color-font/releases

Note: This requires Bitstream Vera is installed and will change yoursystems default serif, sans-serif and monospace fonts.

Why Bitstream Vera

The default serif, sans-serif and monospace font for most Linux distributions isDejaVu. DejaVu includes a wide range of symbols which override theTwitter Color Emoji characters. The previous solution was to makeTwitter Color Emoji the default system font, but that causes a number of issues.A better solution is a different font that doesn't override any emoji characterssuch as Bitstream Vera. Bitstream Vera is the source of the glyphs used inDejaVu, so it's not very different. 99%+ of people will not notice thedifference.

Additional default font options

The Noto and Roboto font families conflict far less than DejaVu. You maywant to try them. Primary issues are the 0x2639 and 0x263a characters.

Known issues

• Symbols/emoji in monospace formatted text cause incorrect character alignment.The whitespace character widths from the most recently selectedfallback font are used in Pango/GTK applications.
• [Issue #31] Some font families are not matched correctly in Linux Firefox.Workaround: Open about:config setgfx.font_rendering.fontconfig.fontlist.enabled to false.Note: May cause crashes in Firefox <48.

Manual install on any Linux

Install for the current user without root:

# 1. Download the latest version
wget https://github.com/eosrei/twemoji-color-font/releases/download/v13.1.0/TwitterColorEmoji-SVGinOT-Linux-13.1.0.tar.gz
# 2. Uncompress the file
tar zxf TwitterColorEmoji-SVGinOT-Linux-13.1.0.tar.gz
# 3. Run the installer
cd TwitterColorEmoji-SVGinOT-Linux-13.1.0
./install.sh

Install on Ubuntu Linux

Launchpad PPA: https://launchpad.net/~eosrei/+archive/ubuntu/fonts

sudo apt-add-repository ppa:eosrei/fonts
sudo apt-get update
sudo apt-get install fonts-twemoji-svginot

Install on Arch Linux

Available in AUR as package ttf-twemoji-color.

Install on Gentoo Linux

Gentoo repository: https://github.com/jorgicio/jorgicio-gentoo

# Install layman using Portage with USE="git" enabled, the default.
emerge layman
# Add the repo.
layman -a jorgicio
# Install the package.
emerge twemoji-color-font

Install on MacOS

Both SVGinOT versions are available from releases:https://github.com/eosrei/twemoji-color-font/releases

1. TwitterColorEmoji-SVGinOT-13.1.0.zip - The regular version of the fontinstalls like any other font and can be specifically selected, but MacOS willdefault to the Apple Color Emoji font for emojis.
2. TwitterColorEmoji-SVGinOT-MacOS-13.1.0.zip - A hack to replace the Apple Color Emoji font by using the same internal name. Install and acceptthe warning in Font Book.

A Homebrew package is available.

# Tap the caskroom/fonts keg, if needed.
brew tap caskroom/fonts
# Install the font using brew
brew cask install font-twitter-color-emoji

Reiterating: Only FireFox supports the SVGinOT color emoji for now. Safari andChrome will use the fallback black and white emoji.

Install on Windows

There are two install options for Windows. Both SVGinOT versions are availablefrom releases: https://github.com/eosrei/twemoji-color-font/releases

Standard install

The regular version of the font installs like any other font and can bespecifically selected, but Windows will default to the Segoe UI Emojifont for emoji characters. Download:https://github.com/eosrei/twemoji-color-font/releases/download/v13.1.0/TwitterColorEmoji-SVGinOT-13.1.0.zip

Replace the default Windows emoji fonts

Windows 7, 8, 10 use emoji from both Segoe UI Symbol and Segoe UI Emoji. Weneed to replace both fonts, but keep the existing symbol characters fromSegoe UI Symbol.

This package contains an install script that will generate both fonts (orin Windows 7, just Segoe UI Symbol) and install them for you. Running theinstall script requires both Python and pip in the PATH.

1. Download the most recent Python 3 for Windows: https://www.python.org/downloads/windows/
2. Start the installer, select "Add Python 3.6 to PATH", finish the install process, then reboot.
3. Download Twitter Color Emoji Windows package from releases:https://github.com/eosrei/twemoji-color-font/releases/download/v13.1.0/TwitterColorEmoji-SVGinOT-Win-13.1.0.zip
4. Uncompress the file.
5. Open the new TwitterColorEmoji directory.
6. Run install.cmd. Note: This will take some time.
7. Install both new fonts when requested.
8. Done!

Reiterating: Only FireFox and Edge (legacy) support the SVGinOT color emoji for now. Chrome and Edge (Chromium based) will use thefallback black and white emoji.

Uninstalling

There are uninstall scripts for Windows and Linux available. Theyare also included in the release files.

Building

Overview:

1. B&W SVGs are generated on-the-fly from the color SVGs
2. The B&W SVGs are imported based on their filename to create either regularglyphs or ligature glyphs.
3. The color SVGs are imported to override both types of glyphs.

Requires:

• Inkscape 1.0+
• Imagemagick
• potrace/mkbitmap
• FontTools 4.14+
• FontForge 20190801+
• SVGO
• make
• SCFBuild (Created for this project!)

Setup and build on Ubuntu 20.04 LTS:

sudo apt-get update
sudo apt-get install inkscape potrace npm nodejs fontforge \
devscripts python3-fontforge python3-pip python3-yaml imagemagick \
git make debhelper build-essential
sudo npm install -g svgo
sudo pip3 install fonttools
git clone https://github.com/eosrei/twemoji-color-font.git
cd twemoji-color-font
git clone https://github.com/13rac1/scfbuild.git SCFBuild
make -j 4

License

The artwork and TTF fonts are licensed CC-BY-4.0. Please seeLICENSE.md for details.