You'll need: FontCreator (Windows and macOS), a vector design tool you already know (Adobe Illustrator, Figma, or Inkscape all work), and a font project with at least one glyph whose outline you'd like to refine somewhere other than the glyph editor.
Sometimes the fastest way to perfect a letterform isn't the glyph editor at all — it's the drawing tool you reach for every day. FontCreator lets you send a glyph's outline out as plain SVG, polish it in Illustrator, Figma, or Inkscape, and pour it straight back into the same glyph. This guide is about that outline round-trip: shapes out, shapes back, nothing lost in translation.
What this is (and what it is not)
This workflow moves monochrome outlines — the black-and-white contours that make up a normal glyph. It is the path-geometry exchange, and it is distinct from FontCreator's colour-font feature.
> Note — Don't confuse this with the glyph editor's Load SVG… / SVG submenu. That belongs to the colour-SVG (SVG color font) path, which stores a full coloured SVG document inside a glyph for OpenType colour fonts. It is a different feature with a different purpose. For plain outline exchange, use Save as SVG… and Import Artwork… as described below.
If your goal is a coloured glyph, see Create OpenType Color Fonts instead. Everything here treats the glyph as a single-colour shape.
Step 1 — Export the outline with Save as SVG…
- Select the glyph (or glyphs) whose outlines you want to send out — in the Font Overview, or open one in the glyph editor.
- Go to Tools → Save as SVG….
- Choose a location and filename, and save.
FontCreator writes the selected glyph's outlines to an SVG file. This is a faithful export of the contour geometry, so the shape you see in the editor is the shape that lands in your design tool.
FontCreator Tools menu open with "Save as SVG…" highlighted, a glyph selected in the Font Overview behind it.
> Tip — Name the SVG after the glyph it came from (for example aacute.svg). When you bring it back, you'll know exactly which glyph it belongs in, and you won't accidentally drop a refined "a" into the cell for "o".
Step 2 — Edit in Illustrator, Figma, or Inkscape
Open the SVG in whichever tool fits the job. A few things to keep in mind so the return trip is clean:
- Adobe Illustrator — Open the SVG directly. Work on the path with the Pen and Direct Selection tools. When you're done, keep the artwork as plain paths (avoid live effects and compound appearances that only exist as Illustrator metadata).
- Figma — Drag the SVG onto the canvas or import it. Edit with the vector network / pen tools. Figma is excellent for quick nudging of nodes and clean Boolean operations.
- Inkscape — Open the SVG and edit nodes with the Node tool. Inkscape's path operations (Union, Difference, Simplify) are handy for cleaning up busy outlines before they come back.
Whatever you draw, you are drawing the filled black shape of the glyph. Think in closed counters and bowls, not in centrelines.
> Watch out — FontCreator's importer extracts closed paths only. It ignores strokes, fills, and text, and any open paths get closed on the way in. If your design relies on a stroked line (a monoline letter, for instance), expand or outline the strokes into filled shapes before you save the SVG — in Illustrator that's Object → Path → Outline Stroke; in Inkscape it's Path → Stroke to Path. If you skip this, a stroked centreline simply won't appear when you import.
> Tip — Keep contour direction sane. Outer contours should wind one way and holes the opposite way so counters stay open. Most design tools handle this automatically with Union / Exclude operations, but if a counter fills in solid after the round-trip, reversed direction is the usual culprit — fix it in FontCreator with Change Direction.
Step 3 — Bring it back with Import Artwork…
When the outline is ready, return it to the same glyph:
- In FontCreator, select (or open) the glyph that should receive the shape.
- Go to Tools → Import Artwork….
- In the file dialog, choose your edited
.svgfile. (The toolbar button for this is labelled Import Image, and the right-click entry reads Import Image… — they all open the same dialog. In prose we call it Import Artwork.)
FontCreator reads the closed paths from the SVG and places them in the glyph.
FontCreator Import Artwork file dialog with an .svg file selected from a folder of exported glyph outlines.
> Note — Save as SVG… and Import Artwork… are the two ends of the outline round-trip. SVG is one of several vector formats Import Artwork accepts (alongside EPS, AI, PS, PDF, and GLIF), so the same door handles imports from many tools — but SVG is the cleanest match for the file you just exported.
Getting the size right (Pixels per em)
Vector imports are scaled by a single setting, not by a popup at import time. If a returned outline comes in too big or too small, that's the place to fix it.
Open Options → Exchange and find the group "Vector Based Images (EPS, AI, PDF, SVG)". The key field is Pixels per em (default 512). This tells FontCreator how to map the SVG's coordinate space onto the font's em. The same group has Origin X/Y and a "Move imported outlines to origin (0,0)" option to control placement.
> Tip — If you set up your design-tool artboard to match this value (a 512-unit canvas if Pixels per em is 512, or 1000 if you raise it to your font's units-per-em), your outlines will return at exactly the right size with no rescaling needed. Decide on a number once and keep your artboards consistent across Illustrator, Figma, and Inkscape.
For the full import picture — raster tracing, all the vector formats, drag-and-drop, and every Exchange option — see Import Vector Artwork (SVG, EPS, AI). This page deliberately stays focused on the SVG out-and-back loop.
A clean round-trip, end to end
- Save as SVG… from the glyph you want to refine.
- Edit in Illustrator / Figma / Inkscape — outline any strokes, keep paths closed.
- Import Artwork… back into the same glyph.
- Check size and position; adjust Options → Exchange → Pixels per em if needed.
- Tidy up in the glyph editor (direction, overlaps, start points) and you're done.
Troubleshooting
| Symptom | Likely cause | Fix |
|---|---|---|
| Nothing appears after Import Artwork | The SVG had only strokes / open paths | Outline strokes into filled shapes before exporting from your design tool; the importer takes closed paths only |
| Outline comes back far too big or too small | Pixels per em mismatch between tool and FontCreator | Set Options → Exchange → Pixels per em to match your artboard size |
| A counter (the hole in an "o" or "a") fills in solid | Inner contour winds the same way as the outer | Select the inner contour and use Change Direction so holes wind opposite to outers |
| Imported shape lands off to one side or below the baseline | Origin offset from the SVG's coordinate space | Use Origin X/Y and "Move imported outlines to origin (0,0)" in Options → Exchange |
| Colours or gradients vanished on import | Outline exchange is monochrome by design | If you want colour, use the colour-SVG path instead — see Create OpenType Color Fonts |
| Text or live effects didn't come across | Importer ignores text, fills, and effect metadata | Convert text to outlines and flatten effects to plain paths before saving the SVG |
Frequently asked questions
Is this the same as the glyph editor's "Load SVG…" command? No. Load SVG… in the glyph editor loads a full coloured SVG document for the SVG colour-font feature. The outline round-trip described here uses Tools → Save as SVG… and Tools → Import Artwork…, and it deals only with monochrome contour geometry.
Does this work on both Windows and macOS? Yes. Save as SVG…, Import Artwork…, and the Options → Exchange settings are available on both platforms.
Can I export several glyphs at once and edit them together? Save as SVG exports the current selection's outlines. Working one glyph at a time keeps the round-trip unambiguous — you always know which shape returns to which cell — but you can select more glyphs if you prefer to batch.
My monoline letters disappear when I import. Why? A monoline drawn as a stroked path has no filled area, and the importer keeps only closed filled paths. Outline the strokes into shapes first, or — if you'd rather keep them as editable centrelines inside FontCreator — design them with FontCreator's own stroke tools instead. See Monoline & Stroke Fonts (Designing with Strokes).
Which design tool is best for this? Whichever you're fastest in. Illustrator and Inkscape both have strong node-editing and path-cleanup tools; Figma is great for quick collaborative tweaks. The SVG file is standard, so all three round-trip equally well as long as you outline strokes and keep paths closed.
Why does my outline need rescaling every time? Because your artboard size and FontCreator's Pixels per em don't agree. Pick one value, set both sides to it, and rescaling disappears.
What to read next
- Import Vector Artwork (SVG, EPS, AI) — the complete import reference: every vector format, raster tracing, and all Exchange options.
- Open & Export .glyphs Files (Glyphs round-trip) — for moving whole glyph sets between FontCreator and Glyphs.
- Export a Font (Export Fonts Correctly) — once your outlines are perfect, ship them as a real font file.
- Monoline & Stroke Fonts (Designing with Strokes) — keep lines as editable strokes inside FontCreator instead of outlining them.
