Skip to content
+

Font Builder

Build icon fonts 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, CSS, demo HTML, metadata, or a complete web package.

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.

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.