Fix SVG Fonts Not Rendering Correctly
SVG text renders in whatever font the viewing system has — which is why your carefully-chosen typeface falls back to Times or Arial.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Why SVG Text Falls Back
An SVG references fonts by name; it doesn't carry them. If the viewer's machine lacks 'Brandon Grotesque', the renderer substitutes, changing metrics, wrapping, and the whole look. This hits hardest in <img>-embedded SVGs, which can't even reach the page's webfonts — they're fully isolated documents.
- SVGs reference font names; they don't include font data
- <img>-loaded SVGs can't use the page's webfonts at all
- Substitution changes metrics — layouts shift, not just letterforms
Three Fixes, Ranked
For logos and fixed graphics: outline the text (Create Outlines / Object to Path) — bulletproof, renders identically everywhere, at the cost of editability. For inline SVG in web pages: load the webfont via page CSS and it applies to inline SVG text normally. For standalone SVGs that must keep real text: embed the font with an @font-face rule inside the SVG's <style> block using a base64 data URI.
- Outline text for logos — the zero-dependency permanent fix
- Inline SVGs inherit page webfonts; <img> SVGs don't
- @font-face with base64 data inside the SVG embeds the font (large file)
Frequently Asked Questions
Why does the SVG look right on my machine but wrong on others?
You have the font installed; they don't. That's the entire bug. Outline the text or embed the font — never rely on viewers having your fonts.
Does outlining text hurt accessibility or SEO?
Outlined text is no longer machine-readable. Add an aria-label or <title> to the SVG for accessibility, and keep important text in HTML rather than inside graphics.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG