color-fonts

Experimental color font builds. Intended to help verify font toolchain builds things that work with consuming tools for COLRv1 (colr gradients spec).

To update the fonts:

1. Run generate_config.py if the config needs to be updated
2. Run build.py to generate the font(s) you want to update

Color fonts in the fonts/ folder

The fonts/ folder contains generated COLRv1 (with different glyph shape formats) and OT-SVG fonts for testing and experimentation. The files in this folder follow the following naming convention.

(Glyph set)-(color font format and glyph definition format).(Extension otf or ttf)

The following glyph sets exist:

Glyph set short name	Description
noto	Full Noto emoji set
noto_handwriting	Only the WRITING HAND ✍️ emoji of the Noto Emoji set
noto_flags	Only the flag emoji of the Noto emoji set
noto_noflags	All but the flags of the Noto emoji set
samples	A set of sample glyphs generated from SVG sources
twemoji	The set of emoji from the Twitter emoji set
tweomji_smiley	Only the smiley emoji from the the Twitter emoji set
test_glyphs	A set of test glyphs generated by the a build script in config/test_glyphs-glyf_colr_1.py, see more info below.

The following color font and glyph definition formats exist:

Format short name	Description
cff2_colr_1	COLRv1 font with CFF2 table contour definitions
cff_colr_1	COLRv1 fotn with CFF table contour definitions
glyf_colr_1	COLRv1 fotn with glyf table contour definitions (TrueType contours)
picosvg	OT-SVG font with SVG sources processed through picosvg
picosvgz	OT-SVG font with SVG sources processed through picosvg and gzip compressed
untouchedsvg	OT-SVG font with SVG source images embeddded as-is
untouchedsvgz	OT-SVG font with SVG source images embeddded as-is and gzip compressed

For example, noto-glyf_colr_1.ttf means that this font contains the Noto Emoji full glyph set, contains the glyph definitions in glyf table format (TrueType outlines) and features a COLRv1 table for the color glyphs functionality. noto_flags-picosvgz.ttf contains only the flag glyphs part of the Noto emoji set, the font is an OT-SVG font where SVG source images went through picosvg for optimization and flattening.

COLRv1 Test Font

The fonts fonts/test_glyphs-glyf_colr_1.ttf "COLRv1 Static Test Glyphs" and fonts/test_glyphs-glyf_colr_1_variable.ttf "COLRv1 Variable Test Glyphs" in this repository provide a set of glyphs testing the static and variable aspects of COLRv1.

For testing, additional versions of these font exist with the suffix _no_cliplist in which COLRv1 ClipLists are removed from the fonts and thus no glyphs have any clipboxes, see below for download links.

Glyph List & Coverage Descriptions

For a list of which glyphs provide test coverage of which specific COLRv1 features, please see the individual glyph descriptions here.

Download the COLRv1 test font

Binaries of the static and variable COLRv1 test font is available in the following files:

• Static: fonts/test_glyphs-glyf_colr_1.ttf
• Variable: fonts/test_glyphs-glyf_colr_1_variable.ttf
• Static, without ClipList: fonts/test_glyphs-glyf_colr_1_no_cliplist.ttf
• Variable, without ClipList: fonts/test_glyphs-glyf_colr_1_variable_no_cliplist.ttf

Build the COLRv1 test font

If you want to build the test fonts yourself, follow these steps:

Run $ ./build.py config/test_glyphs-glyf_colr_1.py

which builds the static test font fonts/fonts/test_glyphs-glyf_colr_1.ttf as well as the variable test font fonts/test_glyphs-glyf_colr_1_variable.ttf.

Verify Variation Support

To verify that a variable COLRv1 font was built, run $ ttx -tCOLR -o- fonts/test_glyphs-glyf_colr_1_variable.ttf | grep VarStore which should show a <VarStore Format="1"> line.

References

• nanoemoji, compiles a set of picosvg into a color font
• picosvg, simplifies svgs to use only a small subset of the full spec