SVG Oh My Goodness ... Fonts!

SVGOMG-Font was designed to solve a single problem: broken fonts in SVG files. Drop the SVG here, get back a fixed SVG with fonts embedded as base64 woff2 so it works anywhere, even inside an <img> tag.

Fonts embedded, not just referenced Works inside <img> tags Runs entirely in your browser

Drop the culprit

or press Cmd+V / Ctrl+V anywhere

Or try a broken sample

Before
After
Options

Baked in, not borrowed

Most SVG editors reference fonts by URL — url("https://…"). That URL silently fails inside <img> tags, email clients, and sandboxed iframes. SVGOMG-Font encodes the actual WOFF2 data as base64 directly in the file, so fonts travel with the SVG, always.

Referenced
Embedded
<img src="diagram.svg">

Works in <img> tags

Inline SVGs can load external fonts. But the moment you drop an SVG into an <img> tag, a CSS background, or an email, external requests are blocked by the browser sandbox. Embedded fonts sidestep the sandbox entirely — the font data is already in the file.

Zero uploads. Zero server.

Your SVG never leaves your machine. Parsing, font lookup, base64 encoding — everything runs locally in your browser. Fonts are fetched from the open Fontsource CDN and cached for instant re-use. No accounts, no quotas, no waiting.

100% local
Outlined
Embedded

Often smaller. Always smarter.

Converting text to outlined paths is the designer's quick fix — but each glyph becomes hundreds of bytes of bezier data. A compressed WOFF2 subset covering the same characters is routinely smaller. And unlike paths, embedded-font SVGs keep real <text> nodes: screen readers, search engines, translation tools, and language models can all read and act on your content.

Why does this exist?

SVGs reference fonts by name — font-family: "Inter" — and rely on the environment to resolve them at render time. That's fine in a web page. Everywhere else, it silently breaks.

The culprits

The only portable fix

Embed the font binary directly inside the SVG — base64-encoded in an @font-face src data URI. No network request, no CORS, no missing file. Just a slightly larger SVG that actually works anywhere.

Why it's tedious by hand

  1. Identify every font family, weight, and style used in the file
  2. Track down the right .woff2 from a CDN or your system
  3. Base64-encode the binary
  4. Inject a valid @font-face block into the SVG's <defs>
  5. Strip any now-redundant <font> elements

SVGOMG-Font does all of that in your browser, in seconds.

Why embedding beats outlining

The other common fix is to convert text to outlines (paths) — but that trades one problem for several new ones: