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.
- Twitter Color Emoji - Color emoji font using Twitter Emoji for Everyone graphics.
- Color CC-BY-4.0 alphanumeric fonts:
- Reinebow - [source]
- Gradiently - [source]
- Multicoloure - [source]
- Freizer - [source]
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:
- https://www.adobe.com/devnet-apps/type/svgopentype.html
- https://hacks.mozilla.org/2014/10/svg-colors-in-opentype-fonts/
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 fonttoolsRequired Python 3 libraries:
- FontTools 4.5+
- FontForge 20190801+
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 informationscfbuild 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:
SCFBuild is released under the GNU General Public License v3. See LICENSE.txt in the project root directory.
-
import 추가 (17번 줄) KEYCAP_INT와 KEYCAP_SEQUENCES를 unicode.py에서 가져오도록 추가.
-
create_font() — KEYCAP 글리프 width=0으로 생성 (63~64번 줄) ZWJ, VS16과 동일하게 U+20E3 글리프를 폭 0으로 등록.
-
add_glyphs() — 두 가지 추가
- KEYCAP_SEQUENCES 치환 로직: 31-fe0f-20e3.svg 같은 파일을 처리할 때 VS16 포함 정규 시퀀스로 변환
- KEYCAP_INT 제거 서브스티튜션: VS16 처리처럼, VS16 + KEYCAP을 제거한 축약 시퀀스도 리거처에 추가 (예: '1' 단독으로 입력해도 키캡으로 렌더링)
- 기존 ZWJ, VS16과 같은 방식으로 KEYCAP / KEYCAP_INT 상수를 추가
- KEYCAP_SEQUENCES 딕셔너리 신규 추가: ZWJ_SEQUENCES와 동일한 구조로, VS16 없는 입력 → VS16 포함 정규 시퀀스로 매핑 (0️⃣~9️⃣ 숫자 10개와 #️⃣, *️⃣ 특수문자 2개, 총 12개 키캡을 포함)