https://github.com/googlefonts/color-fonts
Experimental color font builds.
https://github.com/googlefonts/color-fonts
Last synced: over 1 year ago
JSON representation
Experimental color font builds.
- Host: GitHub
- URL: https://github.com/googlefonts/color-fonts
- Owner: googlefonts
- License: apache-2.0
- Created: 2020-04-05T18:19:53.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-05-27T09:14:55.000Z (about 2 years ago)
- Last Synced: 2025-03-25T07:24:11.435Z (over 1 year ago)
- Language: Python
- Size: 641 MB
- Stars: 97
- Watchers: 21
- Forks: 13
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Contributing: docs/contributing.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/googlefonts/color-fonts/actions/workflows/ci.yml?query=workflow%3ATest)
# color-fonts
Experimental color font builds. Intended to help verify font toolchain builds things that work with consuming tools for COLRv1 ([colr gradients spec](https://github.com/googlefonts/colr-gradients-spec/blob/main/colr-gradients-spec.md)).
To update the fonts:
1. Run [generate_config.py](https://github.com/googlefonts/color-fonts/blob/main/generate_config.py) if the config needs to be updated
1. Run [build.py](https://github.com/googlefonts/color-fonts/blob/main/build.py) to generate the font(s) you want to update
## Color fonts in the fonts/ folder
The [fonts/](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](https://github.com/twitter/twemoji/) set |
| `tweomji_smiley` | Only the smiley emoji from the the [Twitter emoji](https://github.com/twitter/twemoji/) set |
| `test_glyphs` | A set of test glyphs generated by the a build script in [config/test_glyphs-glyf_colr_1.py](config/test_glyphs-glyf_colr_1.py), see [more info below](#colrv1-test-font). |
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`](fonts/test_glyphs-glyf_colr_1.ttf) "COLRv1 Static Test Glyphs" and
[`fonts/test_glyphs-glyf_colr_1_variable.ttf`](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](glyph_descriptions.md).
### 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`](fonts/test_glyphs-glyf_colr_1.ttf)
* Variable: [`fonts/test_glyphs-glyf_colr_1_variable.ttf`](fonts/test_glyphs-glyf_colr_1_variable.ttf)
* Static, without ClipList:
[`fonts/test_glyphs-glyf_colr_1_no_cliplist.ttf`](fonts/test_glyphs-glyf_colr_1_no_cliplist.ttf)
* Variable, without ClipList:
[`fonts/test_glyphs-glyf_colr_1_variable_no_cliplist.ttf`](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 `` line.
## References
* [nanoemoji](https://github.com/googlefonts/nanoemoji), compiles a set of picosvg into a color font
* [picosvg](https://github.com/googlefonts/picosvg), simplifies svgs to use only a small subset of the full spec