blob: 2e42100f0707c7cd7f45e50db376eb762ff1e812 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
|
# Emoji One SVGinOT Color Font
A color and B&W emoji SVGinOT font built primarily from [Emoji One][1] artwork
with full support for [ZWJ][2] [skin tone modifiers][3] and [country flags][4].
The font works in all operating systems, but will *currently* only show color
emoji in Mozilla Firefox and Thunderbird. This is not a limitation of the font,
but of the operating systems and applications. Regular B&W Emoji are included
for backwards/fallback compatibility.
[1]: http://emojione.com/
[2]: http://unicode.org/emoji/charts/emoji-zwj-sequences.html
[3]: http://www.unicode.org/reports/tr51/#Diversity
[4]: http://www.unicode.org/reports/tr51/#Flags
## Download
Go to [releases](https://github.com/eosrei/emojione-color-font/releases),
download the font zip file, install and proceed with the instructions below for
your OS.
## 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][5] and the [OpenType SVG table specifications][6].
SVGinOT Demos (Firefox only):
* https://www.adobe.com/devnet-apps/type/svgopentype.html
* https://hacks.mozilla.org/2014/10/svg-colors-in-opentype-fonts/
[5]: https://www.w3.org/2013/10/SVG_in_OpenType/
[6]: https://www.microsoft.com/typography/otspec/svg.htm
## Examples
Try out some examples so you can see before and after:
* http://getemoji.com/
* http://unicode.org/emoji/charts/emoji-zwj-sequences.html
* https://en.wikipedia.org/wiki/Regional_Indicator_Symbol
## Usage - Linux
The font can be installed and set as the default Emoji font system wide.
1. Get the latest release from: https://github.com/eosrei/emojione-color-font/releases
2. Uncompress the zip file
3. Double click the `ttf` file to open it in *Font Viewer*
4. Click the *Install Font* button
5. Create a font config directory:
```
mkdir -p ~/.config/fontconfig/
```
6. Override your default by creating a `fonts.conf`:
```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
<!-- Make Emoji One Color the initial fallback font-->
<match>
<test name="family"><string>sans-serif</string></test>
<edit name="family" mode="prepend" binding="strong">
<string>Emoji One Color</string>
</edit>
</match>
<match>
<test name="family"><string>serif</string></test>
<edit name="family" mode="prepend" binding="strong">
<string>Emoji One Color</string>
</edit>
</match>
<match>
<test name="family"><string>monospace</string></test>
<edit name="family" mode="prepend" binding="strong">
<string>Emoji One Color</string>
</edit>
</match>
</fontconfig>
```
## Usage - OS X
The font installs like any other font and can be specifically selected, but
the system will default to the `Apple Color Emoji` font. If wanted, change the
default by disabling the original:
```sh
cd /System/Library/Fonts/
sudo mv Apple\ Color\ Emoji.ttf Apple\ Color\ Emoji.ttf-old
```
*Reiterating: Only FireFox supports the color emoji for now. Safari and Chrome
will use the fallback black and white emoji.*
## Usage - Windows 10
The font installs like any other font and can be specifically selected, but
the system will default to the `Segoe UI Emoji` font.
It can be manually selected in CSS, but making it the default is still TBD.
## Building
The build process has only been tested on Ubuntu Linux.
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.
Required applications:
* Inkscape
* Imagemagick
* mkbitmap
* potrace
* FontTools
* FontForge
* [SCFBuild][7] *(created for this project!)*
* make
[7]: https://github.com/eosrei/scfbuild
Run: `make`
Or faster with multiple builds: `'make -j 4`
*I am happy with the resulting glyphs, but if you have ideas about making
them look even better let me know! I am not a font building professional and
only recently learned how to do all of this.* 😋
## Licenses
### Artwork
* Applies to SVG files
* License: Creative Commons Attribution 4.0 International
* Human Readable License: http://creativecommons.org/licenses/by/4.0/
* Complete Legal Terms: http://creativecommons.org/licenses/by/4.0/legalcode
### Source Code
* Applies to everything else
* License: MIT
* Complete Legal Terms: http://opensource.org/licenses/MIT
### Emoji One License
The SVG files of the [Emoji One](http://emojione.com/) project have been
modified to create the fallback emoji glyphs and used as-is for the SVGinOT
color glyphs. Files are stored in `assets/emojione-svg`.
* Source: https://github.com/Ranks/emojione
* Art License: Creative Commons Attribution 4.0 International
Please review the specific attribution requirements for commercial use of
Emoji One icons: http://emojione.com/licensing/
### Twitter Emoji for Everyone License
A few SVG files of the Twitter Emoji for Everyone project are used to fill in
where Emoji One is missing characters required to generate a font. Files are
stored in `assets/svg`.
* Source: https://github.com/twitter/twemoji
* Art License: Creative Commons Attribution 4.0 International
|
