Home

Awesome

SVGinOT Color Font Builder

Create color fonts from SVGs on the command line

scfbuild creates SVG in OpenType color fonts directly from a set of source SVG files greatly simplifying the process of creating a custom color font.

Regular color and standard character glyphs are named by Unicode code point (e.g. 1f60e.svg). Ligatures are named by code points separated by a hyphen - (e.g.1f441-1f5e8.svg). Note: Color glyphs cannot exist alone, they must replace existing standard glyphs.

The generated fonts work in all operating systems, but will currently only show color glyphs in supported applications. This is not a limitation of the generated fonts, but of the operating systems and applications. The primary offender at this time is Chromium, therefore Chrome/NewEdge. Why doesn't it work on Chrome?

Only the SVG in OpenType color font format is supported. The Apple, Google, and Microsoft color font formats are not supported at this time.

Examples

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 and the OpenType SVG table specifications.

SVGinOT Demos:

Setup - Linux

Ubuntu 20.04 LTS / Mint 20

sudo apt-get update
sudo apt-get install fontforge \
  python3-fontforge python3-fonttools python3-pip python3-yaml
sudo pip3 install fonttools

Usage - Linux

Required Python 3 libraries:

Run: bin/scfbuild

$ bin/scfbuild --help
usage: scfbuild [-h] [-o OUTPUT] [-g DIR] [-s DIR] [--transform TRANSFORM]
                [--font-family FAMILY] [--font-subfamily SUBFAMILY]
                [--font-version FONT_VERSION] [-c YAML_CONF] [-v] [-V]

SCFBuild - SVGinOT Color Font Builder 1.x.x

optional arguments:
  -h, --help            show this help message and exit
  -o OUTPUT, --output OUTPUT
                        output font file
  -g DIR, --glyph-svg-dir DIR
                        directory of regular no-color SVG glyphs to add to the
                        font
  -s DIR, --color-svg-dir DIR
                        directory of SVGinOT color SVG glyphs to add to the
                        font.
  --transform TRANSFORM
                        add a transform to the <svg> tag of each color SVG.
                        Example "translate(0 -1638) scale(2.048)"
  --font-family FAMILY  family name for the font. default: Untitled
  --font-subfamily SUBFAMILY
                        weight/style for the font. default: Regular
  --font-version FONT_VERSION
                        version number for the font. default: 1.0
  -c YAML_CONF, --yaml-conf YAML_CONF
                        yaml build configuration, overridden by command line
                        options.
  -v, --verbose         print detailed debug information
  -V, --version         print version information

Other Tools

scfbuild softens the learning curve for font creation, but cannot replace more advanced tools. Here are some starting points if you need more features, although none support color fonts at this time:

License

SCFBuild is released under the GNU General Public License v3. See LICENSE.txt in the project root directory.