Skip to content
+

Usage

A practical workflow for text outlines, SVG font building, source font editing, subsetting, conversion, and web packaging.

1. Import fonts

  • Drag and drop a font file into the main window.
  • Or use File -> Import Font File.
  • Glyph browsing import supports: ttf / woff / woff2.
  • Each new import replaces current session data (no multi-font merge in one session).

2. Browse and filter glyphs

  • Use the left sidebar to filter by Unicode blocks (Basic Latin, CJK, Emoji, and more).
  • Use search to filter by glyph name or Unicode text.
  • Selection shortcuts:
    • Command + Click: non-adjacent multi-select
    • Shift + Click: range select
    • Command + A: select all
    • Delete: remove selected glyphs from current dataset
    • Space: preview selected glyph

3. Inspect metadata

The right inspector has three tabs:

  • Font: font metadata, OpenType layout/script/feature summary, variable-font detection.
  • Selection: glyph-level data such as Unicode, HTML entity, CSS/Swift notation, UTF encodings, and metrics.
  • Export: glyph asset export, Text to SVG, subset generation, and web package workflow.

4. Convert text to SVG outlines

Open Text to SVG from the Export tab after loading a font.

  • Type words, phrases, or multi-line text.
  • Adjust font size, variable weight when available, letter spacing, line height, wrap width, alignment, padding, and fill color.
  • Leave fallback fonts disabled if you want the SVG to stay faithful to the loaded font.
  • Copy SVG to the clipboard or save it as a standalone .svg file.
  • The exported SVG contains outlines, so the font does not need to be installed where the SVG is used.

5. Build fonts from SVG artwork

Open Font Builder from the app menu.

  • Drop outlined SVG files to create a new font.
  • Assign glyph names and Unicode values.
  • Import a static TrueType-based source font if you want to add glyphs or replace existing Unicode glyphs.
  • Use Browse Glyphs to choose replacement targets from the source font.
  • Download an SVG template with baseline and bounds guides before drawing artwork.
  • Run Preflight Check before export.
  • Export TTF, WOFF, WOFF2, CSS, demo HTML, metadata, or a complete web package.

Font Builder expects static outlined SVG artwork. Convert text to outlines before import. Live SVG text, raster images, masks, filters, clipping, scripts, animation, and external resources are rejected instead of being silently changed.

6. Save and reopen font builder projects

Use .webfontproject when a Font Builder job needs to be continued later.

  • Project files save SVG glyphs, build settings, output options, replacement targets, and embedded source font data when a source font is used.
  • Opening the project restores the glyph set and source font data from the project package.
  • If replacement targets were configured, they are restored from the saved source font data.

7. Export glyph assets (SVG / PNG / PDF)

  • Works for single glyph and multi-selection batch export.
  • Export dialog includes size and color controls.
  • Output filenames are based on glyph names plus size suffixes.

8. Generate subset fonts

Source mode

  • Current Selection: use selected glyphs directly.
  • Text Input: paste text or import .txt, then match available characters in the loaded font.

Output formats

  • Choose any combination of WOFF2, WOFF, and TTF.

OpenType controls

  • Layout policy:
    • Preserve all layout features
    • Keep essential positioning only
    • Remove all layout tables
  • Feature-tag filter:
    • Keep only selected tags
    • Remove selected tags
    • Or disable filtering and keep all available tags

Validation and preview

  • Subset Preview shows glyph count, estimated file size, and missing character count.
  • Validation runs before writing files (decode checks, required tables, cmap coverage, and related warnings/errors).

9. Generate web package

Generate Web Package creates:

  • fonts/ with WOFF2 + WOFF
  • a CSS file with @font-face and unicode-range
  • demo.html for preview and character mapping reference

Font Builder also has its own web package export for icon-font-style packages, including CSS, demo HTML, metadata, glyph previews, and HTML snippets.

10. Convert font formats

  • Single Font Conversion...: convert one file.
  • Batch Font Conversion...: queue-based conversion.
  • Conversion input supports: ttf / otf / woff / woff2.
  • Conversion target supports: WOFF / WOFF2 / TTF/OTF (Auto).

11. Current limitations

  • Subset generation supports one source font at a time.
  • Subset output currently supports TrueType-outline fonts only.
  • Font Builder source font editing supports static TrueType-based fonts.
  • Font Builder SVG input must be outlined static artwork.
  • Text to SVG can use a variable weight axis for SVG outline export when the loaded font provides one.