Skip to content
+

Font Builder

Build monochrome or color icon and web fonts from outlined SVG artwork, or add and replace glyphs in a static TrueType-based source font.

Font Builder is designed for predictable font production from clean vector artwork. It rejects unsupported SVG and font features instead of silently changing them.

Build a new font from SVG

Use this workflow when you have icon artwork and want to ship it as a font.

  1. Open Font Builder.
  2. Drop outlined SVG files into the glyph list.
  3. Review glyph names and Unicode values.
  4. Run Preflight Check.
  5. Export TTF, WOFF, WOFF2, or a complete web package with CSS, demo HTML, and metadata.json.

Add or replace glyphs in a source font

Font Builder can import a static TrueType-based source font.

  • Add SVG glyphs to the source font.
  • Replace existing Unicode glyphs with SVG artwork.
  • Use Browse Glyphs to choose replacement targets from the source font.
  • Keep replacement glyph IDs stable when editing a source font.
  • Save the job as a .webfontproject if you need to continue later.

SVG requirements

Font Builder expects static outlined SVG artwork.

Supported artwork should be flattened before import. Unsupported input includes live SVG text, raster images, filters, masks, clipping paths, scripts, animation, video, audio, iframes, and external resources.

SVG template

Use the SVG template export before drawing icon artwork. The template includes baseline and bounds guides so icons can be aligned to the font metrics before import.

Color fonts

Font Builder can build color fonts from outlined SVG artwork. Color mode keeps supported solid fills, strokes, linear/radial gradients, and opacity in COLR/CPAL, adds an SVG fallback for supported gradient/effect glyphs, and lets currentColor follow the text color. Extra palettes can be tagged for light or dark backgrounds.

Use Import Font… to bring supported COLR/SVG glyphs in as vector artwork. Unsupported color effects or bitmap-only glyphs may be imported as monochrome outlines with a warning.

Web package output

The web package export can include:

  • Font files.
  • CSS with @font-face.
  • Demo HTML.
  • Metadata.
  • Glyph previews.
  • HTML snippets for icon-font usage.

Best practices

  • Use Private Use Area Unicode values for icon fonts unless you intentionally need standard Unicode mappings.
  • Keep icon SVGs visually centered and aligned to the same canvas.
  • Run Preflight before every export.
  • Fix red rows before shipping production fonts.