# Twitter Color Emoji SVGinOT Font
A color and B&W emoji SVG-OpenType / SVGinOT font built from the
[Twitter Emoji for Everyone][1] artwork with support for [ZWJ][2],
[skin tone diversity][3] and [country flags][4].
The font works in all operating systems, but will _currently_ only show color
emoji in Firefox, Thunderbird, and Photoshop CC 2017+.
This is not a limitation of the font, but of the operating systems and
applications. [Why doesn't it work on Chrome?][why-not-chrome] Regular B&W
outline emoji are included for backwards/fallback compatibility.
[1]: https://github.com/twitter/twemoji
[2]: https://unicode.org/emoji/charts/emoji-zwj-sequences.html
[3]: https://www.unicode.org/reports/tr51/#Diversity
[4]: https://www.unicode.org/reports/tr51/#Flags
[why-not-chrome]: https://bugs.chromium.org/p/chromium/issues/detail?id=306078
## Table of Contents
- [Examples](#examples)
- [What is SVGinOT?](#what-is-svginot)
- [Install on Linux](#install-on-linux)
- [Install on MacOS](#install-on-macos)
- [Install on Windows](#install-on-windows)
- [Uninstalling](#uninstalling)
- [Building](#building)
- [License](#license)
## Examples
Demo in Firefox on Linux.
## What is SVGinOT?
_SVG in Open Type_ is a standard by Adobe and Mozilla for color OpenType
and Open Font Format fonts. It allows font creators to embed complete SVG files
within a font enabling full color and even animations. There are more details
in the [SVGinOT proposal][6] and the [OpenType SVG table specifications][7].
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/
[6]: https://www.w3.org/2013/10/SVG_in_OpenType/
[7]: https://www.microsoft.com/typography/otspec/svg.htm
## Install on Linux
The font can be installed for a user or system-wide. Get the latest version
from releases: https://github.com/13rac1/twemoji-color-font/releases
_Note: This requires `Bitstream Vera` is installed and will change your
systems default serif, sans-serif and monospace fonts._
### Why Bitstream Vera
The default serif, sans-serif and monospace font for most Linux distributions is
`DejaVu`. `DejaVu` includes a wide range of symbols which override the
`Twitter Color Emoji` characters. The previous solution was to make
`Twitter 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 characters
such as `Bitstream Vera`. `Bitstream Vera` is the source of the glyphs used in
`DejaVu`, so it's not very different. 99%+ of people will not notice the
difference.
### Additional default font options
The `Noto` and `Roboto` font families conflict far less than `DejaVu`. You may
want to try them. Primary issues are the 0x2639 and 0x263a characters.
### Known issues
- [Symbols/emoji in monospace formatted text cause incorrect character alignment][8].
The whitespace character widths from the most recently selected
fallback font are used in Pango/GTK applications.
- [[Issue #31][9]] [Some font families are not matched correctly in Linux Firefox][10].
Workaround: Open `about:config` set
`gfx.font_rendering.fontconfig.fontlist.enabled` to `false`.
[Note: May cause crashes in Firefox <48.][11]
[8]: https://bugzilla.gnome.org/show_bug.cgi?id=757785
[9]: https://github.com/13rac1/emojione-color-font/issues/31
[10]: https://bugzilla.mozilla.org/show_bug.cgi?id=1245811
[11]: https://bugzilla.mozilla.org/show_bug.cgi?id=1266341
### Manual install on any Linux
Install for the current user without root:
```sh
# 1. Download the latest version
wget https://github.com/13rac1/twemoji-color-font/releases/download/v14.0.2/TwitterColorEmoji-SVGinOT-Linux-14.0.2.tar.gz
# 2. Uncompress the file
tar zxf TwitterColorEmoji-SVGinOT-Linux-14.0.2.tar.gz
# 3. Run the installer
cd TwitterColorEmoji-SVGinOT-Linux-14.0.2
./install.sh
```
### Install on Ubuntu Linux
Launchpad PPA: https://launchpad.net/~eosrei/+archive/ubuntu/fonts
```sh
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][AUR] as package [`ttf-twemoji-color`][aur-package].
[AUR]: https://wiki.archlinux.org/index.php/Arch_User_Repository
[aur-package]: https://aur.archlinux.org/packages/ttf-twemoji-color/
### Install on Gentoo Linux
Gentoo repository: https://github.com/jorgicio/jorgicio-gentoo
```sh
# 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/13rac1/twemoji-color-font/releases
1. `TwitterColorEmoji-SVGinOT-14.0.2.zip` - The regular version of the font
installs like any other font and can be specifically selected, but MacOS will
default to the `Apple Color Emoji` font for emojis.
2. `TwitterColorEmoji-SVGinOT-MacOS-14.0.2.zip` - A hack to replace the `Apple Color Emoji` font by [using the same internal name][12]. Install and accept
the warning in Font Book.
A [Homebrew](https://brew.sh) package is available.
```sh
# Tap the brew tap homebrew/cask-fonts keg (caskroom/fonts keg were moved into this).
brew tap homebrew/cask-fonts
# Install the font using brew
brew cask install font-twitter-color-emoji
# If that doesnt work, try...
brew install --cask font-twitter-color-emoji
```
[12]: https://www.macissues.com/2014/11/21/how-to-change-the-default-system-font-in-mac-os-x/
_Reiterating: Only FireFox supports the SVGinOT color emoji for now. Safari and
Chrome will use the fallback black and white emoji._
## Install on Windows
There are two standdard install options for Windows. Both SVGinOT versions are available
from releases: https://github.com/13rac1/twemoji-color-font/releases
You can also use the [Chocolatey package](https://community.chocolatey.org/packages/twemoji)
to handle the installation and the future updates.
```powershell
choco install twemoji
```
### Standard install
The regular version of the font installs like any other font and can be
specifically selected, but Windows will default to the `Segoe UI Emoji`
font for emoji characters. Download:
https://github.com/13rac1/twemoji-color-font/releases/download/v14.0.2/TwitterColorEmoji-SVGinOT-14.0.2.zip
### Replace the default Windows emoji fonts
Windows 7, 8, 10 use emoji from both Segoe UI Symbol and Segoe UI Emoji. We
need to replace both fonts, but keep the existing symbol characters from
Segoe UI Symbol.
This package contains an install script that will generate both fonts (or
in Windows 7, just Segoe UI Symbol) and install them for you. Running the
install script requires both [Python][16] 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/13rac1/twemoji-color-font/releases/download/v14.0.2/TwitterColorEmoji-SVGinOT-Win-14.0.2.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!
[16]: https://www.python.org/downloads/windows/
_Reiterating: Only FireFox and Edge (legacy) support the SVGinOT color emoji for now. Chrome and Edge (Chromium based) will use the
fallback black and white emoji._
## Uninstalling
There are uninstall scripts for [Windows][17] and [Linux][18] available. They
are also included in the release files.
[17]: windows/uninstall.cmd
[18]: linux/uninstall.sh
## 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 regular
glyphs 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][13] _(Created for this project!)_
[13]: https://github.com/13rac1/scfbuild
Setup and build on Ubuntu 20.04 LTS:
```sh
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/13rac1/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 see
[LICENSE.md](LICENSE.md) for details.