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