@2020/06/08

I've noticed that unicode characters I am using in this blog (📰📄📩📂📄🗒) look completely different when viewed using FireFox and Chromium:

---

---

First I wanted to replace them with images, but then I've realized that this is probably problem of fonts. So I've googled and I've found Google's Noto Color Emoji font. It has just one slight problem - it is almost 7MB in size.

I don't want to load 7MB just to use a few unicode images, so I googled more to find out how to limit the subset to just used characters.

Create subset of the font

Install https://github.com/fonttools/fonttools:

pip install --user fonttools

Then run following command on the downloaded font

pyftsubset NotoColorEmoji.ttf --unicodes="U+0001f4f0,U+0001f4c4,U+0001f4e9,U+0001f4c2,U+0001f5ce,U+0001f5d2" --layout-features="" --flavor="woff" --output-file="NotoEmojiSubset.ttf"

and

pyftsubset NotoColorEmoji.ttf --unicodes="U+0001f4f0,U+0001f4c4,U+0001f4e9,U+0001f4c2,U+0001f5ce,U+0001f5d2" --layout-features="" --flavor="woff" --output-file="NotoEmojiSubset.woff"

for woff format. Files are tiny, just 8.9kB for my subset.

Character codes

I've found out what kind of unicode codes I want simply by typing it to the python shell:

$ python
Python 2.7.17 (default, Apr 15 2020, 17:20:14) 
[GCC 7.5.0] on linux2
Type "help", "copyright", "credits" or "license" for more information.
>>> u"📰📄📩📂📄🗒"
u'\U0001f4f0\U0001f4c4\U0001f4e9\U0001f4c2\U0001f5ce\U0001f5d2'

And then to modify the code to contain the + character, that is to convert \U001f4f0 to U+001f4f0.

Usage

Add this to your CSS:

...

@font-face {
    font-family: "NotoEmojiSubset";
    src: url(NotoEmojiSubset.ttf) format("ttf");
    src: url(NotoEmojiSubset.woff) format("woff");
    font-style: normal;
    font-weight: 400;
}

.sans { font-family: NotoEmojiSubset, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; }

...