1# Twitter Color Emoji SVGinOT Font
2
3A color and B&W emoji SVG-OpenType / SVGinOT font built from the
4[Twitter Emoji for Everyone][1] artwork with support for [ZWJ][2],
5[skin tone diversity][3] and [country flags][4].
6
7The font works in all operating systems, but will *currently* only show color
8emoji in Firefox, Thunderbird, Photoshop CC 2017+, and Windows Edge V38.14393+.
9This is not a limitation of the font, but of the operating systems and
10applications. [Why doesn't it work on Chrome?][why-not-chrome] Regular B&W
11outline emoji are included for backwards/fallback compatibility.
12
13[1]: https://github.com/twitter/twemoji
14[2]: https://unicode.org/emoji/charts/emoji-zwj-sequences.html
15[3]: https://www.unicode.org/reports/tr51/#Diversity
16[4]: https://www.unicode.org/reports/tr51/#Flags
17[why-not-chrome]: https://bugs.chromium.org/p/chromium/issues/detail?id=306078
18
19## Table of Contents
20
21* [Examples](#examples)
22* [What is SVGinOT?](#what-is-svginot)
23* [Install on Linux](#install-on-linux)
24* [Install on MacOS](#install-on-macos)
25* [Install on Windows](#install-on-windows)
26* [Uninstalling](#uninstalling)
27* [Building](#building)
28* [License](#license)
29
30## Examples
31
32Demo in Firefox on Linux.
33![Firefox color emoji in Linux](images/twemoji-font-demo.png?raw=true)
34
35## What is SVGinOT?
36*SVG in Open Type* is a standard by Adobe and Mozilla for color OpenType
37and Open Font Format fonts. It allows font creators to embed complete SVG files
38within a font enabling full color and even animations. There are more details
39in the [SVGinOT proposal][6] and the [OpenType SVG table specifications][7].
40
41SVGinOT Font demos (Firefox only):
42
43* https://hacks.mozilla.org/2014/10/svg-colors-in-opentype-fonts/
44* https://xerographer.github.io/reinebow/
45* https://xerographer.github.io/multicoloure/
46
47[6]: https://www.w3.org/2013/10/SVG_in_OpenType/
48[7]: https://www.microsoft.com/typography/otspec/svg.htm
49
50## Install on Linux
51The font can be installed for a user or system-wide. Get the latest version
52from releases: https://github.com/eosrei/twemoji-color-font/releases
53
54*Note: This requires `Bitstream Vera` is installed and will change your
55systems default serif, sans-serif and monospace fonts.*
56
57### Why Bitstream Vera
58The default serif, sans-serif and monospace font for most Linux distributions is
59`DejaVu`. `DejaVu` includes a wide range of symbols which override the
60`Twitter Color Emoji` characters. The previous solution was to make
61`Twitter Color Emoji` the default system font, but that causes a number of issues.
62A better solution is a different font that doesn't override any emoji characters
63such as `Bitstream Vera`. `Bitstream Vera` is the source of the glyphs used in
64`DejaVu`, so it's not very different. 99%+ of people will not notice the
65difference.
66
67### Additional default font options
68The `Noto` and `Roboto` font families conflict far less than `DejaVu`. You may
69want to try them. Primary issues are the 0x2639 and 0x263a characters.
70
71### Known issues
72
73* [Symbols/emoji in monospace formatted text cause incorrect character alignment][8].
74  The whitespace character widths from the most recently selected
75  fallback font are used in Pango/GTK applications.
76* [[Issue #31][9]] [Some font families are not matched correctly in Linux Firefox][10].
77  Workaround: Open `about:config` set
78  `gfx.font_rendering.fontconfig.fontlist.enabled` to `false`.
79  [Note: May cause crashes in Firefox <48.][11]
80
81[8]:https://bugzilla.gnome.org/show_bug.cgi?id=757785
82[9]:https://github.com/eosrei/emojione-color-font/issues/31
83[10]:https://bugzilla.mozilla.org/show_bug.cgi?id=1245811
84[11]:https://bugzilla.mozilla.org/show_bug.cgi?id=1266341
85
86### Manual install on any Linux
87Install for the current user without root:
88```sh
89# 1. Download the latest version
90wget https://github.com/eosrei/twemoji-color-font/releases/download/v13.1.0/TwitterColorEmoji-SVGinOT-Linux-13.1.0.tar.gz
91# 2. Uncompress the file
92tar zxf TwitterColorEmoji-SVGinOT-Linux-13.1.0.tar.gz
93# 3. Run the installer
94cd TwitterColorEmoji-SVGinOT-Linux-13.1.0
95./install.sh
96```
97
98### Install on Ubuntu Linux
99Launchpad PPA: https://launchpad.net/~eosrei/+archive/ubuntu/fonts
100
101```sh
102sudo apt-add-repository ppa:eosrei/fonts
103sudo apt-get update
104sudo apt-get install fonts-twemoji-svginot
105```
106
107### Install on Arch Linux
108Available in [AUR][AUR] as package [`ttf-twemoji-color`][aur-package].
109
110[AUR]:https://wiki.archlinux.org/index.php/Arch_User_Repository
111[aur-package]:https://aur.archlinux.org/packages/ttf-twemoji-color/
112
113### Install on Gentoo Linux
114Gentoo repository: https://github.com/jorgicio/jorgicio-gentoo
115
116```sh
117# Install layman using Portage with USE="git" enabled, the default.
118emerge layman
119# Add the repo.
120layman -a jorgicio
121# Install the package.
122emerge twemoji-color-font
123```
124
125## Install on MacOS
126Both SVGinOT versions are available from releases:
127https://github.com/eosrei/twemoji-color-font/releases
128
1291. `TwitterColorEmoji-SVGinOT-13.1.0.zip` - The regular version of the font
130   installs like any other font and can be specifically selected, but MacOS will
131   default to the `Apple Color Emoji` font for emojis.
1322. `TwitterColorEmoji-SVGinOT-MacOS-13.1.0.zip` - A hack to replace the `Apple
133   Color Emoji` font by [using the same internal name][12]. Install and accept
134   the warning in Font Book.
135
136A [Homebrew](https://brew.sh) package is available.
137
138```sh
139# Tap the caskroom/fonts keg, if needed.
140brew tap caskroom/fonts
141# Install the font using brew
142brew cask install font-twitter-color-emoji
143```
144
145[12]:https://www.macissues.com/2014/11/21/how-to-change-the-default-system-font-in-mac-os-x/
146
147*Reiterating: Only FireFox supports the SVGinOT color emoji for now. Safari and
148Chrome will use the fallback black and white emoji.*
149
150## Install on Windows
151
152There are two install options for Windows. Both SVGinOT versions are available
153from releases: https://github.com/eosrei/twemoji-color-font/releases
154
155### Standard install
156
157The regular version of the font installs like any other font and can be
158specifically selected, but Windows will default to the `Segoe UI Emoji`
159font for emoji characters. Download:
160https://github.com/eosrei/twemoji-color-font/releases/download/v13.1.0/TwitterColorEmoji-SVGinOT-13.1.0.zip
161
162### Replace the default Windows emoji fonts
163
164Windows 7, 8, 10 use emoji from both Segoe UI Symbol and Segoe UI Emoji. We
165need to replace both fonts, but keep the existing symbol characters from
166Segoe UI Symbol.
167
168This package contains an install script that will generate both fonts (or
169in Windows 7, just Segoe UI Symbol) and install them for you. Running the
170install script requires both [Python][16] and pip in the PATH.
171
1721. Download the most recent Python 3 for Windows: https://www.python.org/downloads/windows/
1732. Start the installer, select "Add Python 3.6 to PATH", finish the install process, then reboot.
1743. Download Twitter Color Emoji Windows package from releases:
175https://github.com/eosrei/twemoji-color-font/releases/download/v13.1.0/TwitterColorEmoji-SVGinOT-Win-13.1.0.zip
1764. Uncompress the file.
1775. Open the new TwitterColorEmoji directory.
1786. Run install.cmd. *Note: This will take some time.*
1797. Install both new fonts when requested.
1808. Done!
181
182[16]:https://www.python.org/downloads/windows/
183
184*Reiterating: Only FireFox and Edge (legacy) support the SVGinOT color emoji for now. Chrome and Edge (Chromium based) will use the
185fallback black and white emoji.*
186
187## Uninstalling
188
189There are uninstall scripts for [Windows][17] and [Linux][18] available. They
190are also included in the release files.
191
192[17]:windows/uninstall.cmd
193[18]:linux/uninstall.sh
194
195## Building
196
197Overview:
198
1991. B&W SVGs are generated on-the-fly from the color SVGs
2002. The B&W SVGs are imported based on their filename to create either regular
201   glyphs or ligature glyphs.
2023. The color SVGs are imported to override both types of glyphs.
203
204Requires:
205
206* Inkscape 1.0+
207* Imagemagick
208* potrace/mkbitmap
209* FontTools 4.14+
210* FontForge 20190801+
211* SVGO
212* make
213* [SCFBuild][13] *(Created for this project!)*
214
215[13]: https://github.com/13rac1/scfbuild
216
217Setup and build on Ubuntu 20.04 LTS:
218
219```sh
220sudo apt-get update
221sudo apt-get install inkscape potrace npm nodejs fontforge \
222devscripts python3-fontforge python3-pip python3-yaml imagemagick \
223git make debhelper build-essential
224sudo npm install -g svgo
225sudo pip3 install fonttools
226git clone https://github.com/eosrei/twemoji-color-font.git
227cd twemoji-color-font
228git clone https://github.com/13rac1/scfbuild.git SCFBuild
229make -j 4
230```
231
232## License
233
234The artwork and TTF fonts are licensed CC-BY-4.0. Please see
235[LICENSE.md](LICENSE.md) for details.
236