A wee tool to build color fonts, including the proposed COLRv1. Relies heavily on Skia via picosvg, as well as resvg to rasterize SVG to PNG for the bitmap color formats.
For example, to build a COLRv1 font with a focus on handwriting do the following in a venv:
pip install -e .
nanoemoji --helpfull
nanoemoji --color_format glyf_colr_1 $(find ../noto-emoji/svg -name 'emoji_u270d*.svg')Requires Python 3.8 or greater.
| Format | Support | Notes |
|---|---|---|
| COLRv1 | Yes | x-glyph reuse |
| COLRv0 | Yes | x-glyph reuse (limited), no gradients |
| SVG | Yes | x-glyph reuse |
| sbix | Yes | Only for Mac Safari due to harfbuzz/harfbuzz#2679 (comment). Only square bitmaps. Uses resvg. |
| CBDT | Yes | Only square bitmaps. Uses resvg. |
Given at least one vector color table (COLR or SVG) the other vector color table and bitmap table(s) can be generated:
# Adds COLR to a font with SVG and vice versa
maximum_color my_colr_font.ttf
# Adds COLR to a font with SVG and vice versa, and generates a CBDT table
maximum_color --bitmaps my_colr_font.ttfThe intended result is a font that will Just Work in any modern browser:
| Color table | Target browser | Notes |
|---|---|---|
| COLR | Chrome 98+ | https://developer.chrome.com/blog/colrv1-fonts/ |
| SVG | Firefox, Safari | |
| CBDT | Chrome <98 | Only generated if you pass --bitmaps to maximum_color |
Note that at time of writing Chrome 98+ prefers CBDT to COLR. Same for any environment, such as Android, that relies on Skia, which in turns depends on FreeType to parse color tables (cf. Skia's issue 12945 and FreeType's issue 1142). Also CBDT is huge. So ... maybe take the resulting font and subset it per-browser if at all possible. Wouldn't it be nice if Google Fonts did that for you?
See https://googlefonts.github.io/python#make-a-release.
To help confirm valid output nanoemoji can optionally perform image diffs
between browser rendering of the original SVGs and rendering from the compiled font.
Chrome must be installed in the normal location.
Usage:
# Get some svgs to play with
git clone --recursive [email protected]:googlefonts/color-fonts.git
# Now run nanoemoji, render some hands, and see how we do!
# https://rsheeter.github.io/android_fonts/emoji.html?q=u:270b
nanoemoji --gen_svg_font_diffs \
$(find color-fonts/font-srcs/noto-emoji/svg -name 'emoji_u270b*.svg')