How to font-to-svg-path: supported fonts, limits, and edge cases
- Step 1Confirm your font format — The converter accepts TTF, OTF, and WOFF over a public URL. WOFF2 is not decoded by the parser — convert it to WOFF or TTF first. There is no upload picker and no bundled font list; you provide the URL.
- Step 2Pick the right static font, not a variable instance you can't set — There is no axis control. If you need a specific weight/width of a variable font, export or download that static instance and point the tool at it, so the outlines are the weight you intend.
- Step 3Check glyph coverage for your text — Every character in your SVG's
<text>must exist in the font, or it falls back to.notdef(an empty box). For extended Latin, Cyrillic, or symbols, verify the font covers them before converting a whole set. - Step 4Bake any layout you need into the elements — Because
text-anchor,tspanoffsets, andletter-spacingare ignored, set the left-edgex, the baseliney, and an explicitfont-sizeon each<text>. Split multi-line text into separate<text>elements, one per line. - Step 5Don't expect OpenType-feature selection — There are no toggles for ligatures, small caps, or stylistic sets. If a specific feature must appear, use a font whose default glyphs already produce it, or apply the feature in a design tool and export those glyphs as paths there.
- Step 6Run a small sample first — Convert one representative
<text>and inspect the output for correct glyphs, coverage, and positions before committing to a project. Catching a.notdefbox or a missing axis here saves a re-run later.
Font format & feature support
What the converter accepts and applies, taken from the implementation. "No" means the feature is not exposed, not that you did something wrong.
| Capability | Supported? | Detail |
|---|---|---|
| TTF via URL | Yes | Parsed by opentype.js |
| OTF via URL | Yes | CFF outlines traced to path data |
| WOFF via URL | Yes | Decoded and parsed |
| WOFF2 via URL | No | Not decoded — convert to WOFF/TTF first |
| Font upload / picker | No | URL only; no built-in library |
| OpenType-feature toggles | No | No ligature/small-caps/stylistic-set controls |
| Variable-font axis control | No | Default instance is traced |
| Color fonts (COLR/CPAL, emoji) | No | Single-color outlines only |
| Bidi / Arabic shaping | No | Logical-order glyphs, no reordering/joining |
Per-element handling & limits
What's read from each <text>, what's ignored, and the real limits.
| Item | Behaviour |
|---|---|
x / y | Read (default 0); start position and baseline |
font-size | Read (default 16); em size of the outline |
fill | Read (default currentColor); copied to the <path> |
text-anchor | Ignored — glyphs start at x |
tspan dx/dy/x/y | Ignored — parent <text> position and full content used |
CSS letter-spacing | Ignored — font advances/kerning only |
| Missing glyph | Falls back to font .notdef (empty box) |
| Per-string character limit | None in the converter itself |
| File size limit | SVG family cap by tier (Developer: 2 GB) |
| Output precision | Path data at 3 decimal places |
Cookbook
Concrete cases that show exactly where support starts and stops.
OTF with CFF outlines: supported
An OpenType-CFF font (.otf) parses and traces fine — its glyph outlines become path data just like a TrueType font.
fontUrl = https://cdn/MyDisplay-Regular.otf Input: <text x="0" y="48" font-size="48">Display</text> Output: <path d="..." fill="currentColor" aria-label="Display"/> Metrics: Font: My Display
WOFF2 from Google Fonts: not supported
Google Fonts serves WOFF2 by default; that exact URL fails because the parser can't decode WOFF2. Use the WOFF or TTF variant of the same family instead.
fontUrl = https://fonts.gstatic.com/.../Inter.woff2 Result: parse error (WOFF2 not supported). Fix: use the .woff or .ttf URL for the same face, e.g. host Inter-Regular.woff yourself or use a TTF.
Variable font: you get the default instance
Point the tool at a variable font and there's no way to set weight/width axes — it traces the default instance. For a specific weight, supply that static instance.
Want: weight 700.
Wrong: point at Inter-Variable.ttf -> default instance,
likely weight 400.
Right: point at Inter-Bold.ttf (static 700 instance).Missing glyph becomes .notdef
A character the font doesn't include renders as the font's .notdef box, exactly as a browser would. Check coverage first.
Font has Latin only; text contains 'Привет'. Output: a row of .notdef boxes for the Cyrillic. Fix: use a font that covers Cyrillic, or subset one that does, before converting.
Multi-line via tspan collapses
A two-line <text> built from positioned <tspan>s collapses onto one baseline because tspan offsets are ignored. Split into separate <text> elements.
Collapses:
<text x="0" y="20">
<tspan>Line 1</tspan>
<tspan x="0" dy="24">Line 2</tspan>
</text>
Fix:
<text x="0" y="20" font-size="20">Line 1</text>
<text x="0" y="44" font-size="20">Line 2</text>Edge cases and what actually happens
WOFF2 font URL
invalidThe parser supports TTF, OTF, and WOFF only; WOFF2 fails. Because Google Fonts serves WOFF2 by default, copying a gstatic WOFF2 URL won't work — use the WOFF/TTF variant or self-host a supported format.
Color or emoji font
UnsupportedFonts with COLR/CPAL layers, embedded SVG glyphs, or emoji bitmaps can't be flattened to single-color paths here. The converter traces monochrome outline glyphs. Rasterize color glyphs as images instead.
Needing a specific OpenType feature
Not availableThere are no feature toggles (ligatures, small caps, swashes, stylistic sets). You get the font's default glyphs and basic substitutions. Use a font whose defaults produce the look, or bake the feature in a design tool and export those glyphs as paths.
Variable font, specific axis wanted
PartialNo axis controls exist; the default instance is traced. For a precise weight/width, supply the corresponding static instance file rather than the variable font.
Arabic / Hebrew shaping and reordering
PartialGlyphs are outlined in logical order; full bidirectional reordering and Arabic contextual joining are not performed. Latin, numerals, and simple scripts are fine. Shape complex RTL text in a design tool and export those shaped glyphs as paths.
Character missing from the font
PreservedMissing glyphs fall back to the font's .notdef (an empty box), just as a browser shows. Confirm the font covers every character in your SVG before a batch.
text-anchor / tspan / letter-spacing relied upon
By designOnly x, y, font-size, and fill are read. Centered/right-aligned text shifts to x, tspan offsets are dropped, and CSS spacing isn't applied. Bake the layout into per-line <text> elements with explicit positions first.
Font URL blocked by CORS
blockedThe font is fetched from your browser, so the host must allow cross-origin requests. Private CDNs often don't. Re-host on a CORS-enabled origin (gstatic and GitHub raw generally work).
SVG with no <text>
ErrorZero <text> elements throws "No <text> elements found to outline." That's expected for SVGs already exported as paths — they're already font-independent.
Very large SVG vs tier limit
SupportedThere's no per-string character cap in the converter; the governing limit is the SVG family file size for your tier. On Developer (this tool's tier) that's 2 GB — far beyond any text-bearing SVG.
Frequently asked questions
Which font formats are supported?
TTF, OTF, and WOFF, supplied as a public URL. WOFF2 is not supported because the parser doesn't decode it — convert to WOFF or TTF first.
Can I upload a font or pick from a library?
No. The only option is a Font URL. There is no upload picker and no built-in font library; you point the tool at a publicly fetchable font file.
Does it support variable fonts?
It will parse one, but there are no axis controls — it traces the default instance. For a specific weight or width, supply the matching static instance file.
Can I turn on ligatures or small caps?
No. There are no OpenType-feature toggles. You get the font's default glyphs and basic substitutions. Use a font whose defaults produce the look, or bake the feature in a design tool.
Does it shape Arabic or Hebrew correctly?
Not fully. Glyphs are outlined in logical order without bidirectional reordering or Arabic joining. Shape complex RTL text in a design tool and export those glyphs as paths.
Does it support color/emoji fonts?
No. It traces single-color outline glyphs. COLR/CPAL, SVG-in-OpenType, and emoji fonts can't be flattened here — rasterize those as images.
What happens to a character the font lacks?
It falls back to the font's .notdef glyph — typically an empty box — exactly as a browser would render it. Check coverage before converting.
Is there a character limit per text string?
No per-string character limit exists in the converter. The real ceiling is the SVG family file size for your tier (2 GB on Developer).
Are text-anchor and tspan offsets honored?
No. Only x, y, font-size, and fill are read. Centered text shifts to x, and tspan offsets are dropped. Bake the layout into per-line <text> elements.
What precision is the output path data?
Path data is emitted at 3 decimal places, so identical input SVG and font produce identical output.
Does the font URL need CORS?
Yes. The font is fetched in your browser, so the host must allow cross-origin requests. gstatic and GitHub raw generally work; many private CDNs don't.
Which tier is required?
Font-to-path is a Developer-tier tool. It runs in the browser and is not exposed on the server-safe SVG API; the Developer SVG file limit is 2 GB. Because the output is single-colour outline glyphs, the monochrome converter pairs well when you need one-colour variants of the outlined text.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.