SVG troubleshooting
Why does my SVG logo change fonts?
Find the cause of a changed wordmark, convert approved lettering to outlines and verify the file your client will actually use.
The short answer
An SVG logo can change fonts when its lettering is still live text and the receiving app or browser cannot use the intended font. For a fixed, approved wordmark, convert the correct lettering to vector outlines in a delivery copy or during export. Keep an editable master, then test the exported SVG where it will be used. If the letters are already paths, investigate the export or display settings instead.
Why an SVG can still depend on a font
SVG can store editable text as well as vector shapes. A text object can name a font without including that font. If the viewer cannot access it, another font may be used. That changes the letterforms and can also change the width of the wordmark.
The browser selects from available font families; individual characters can fall back when a font lacks a required glyph. This is why an accent, symbol or single letter may look wrong even when the rest seems correct. CSS can also override an SVG font-family attribute.
Converting the approved lettering to outlines stores its visible shapes as vector paths. The recipient no longer needs that font to draw those letters. It is a useful delivery choice for a fixed logo, while the editable source remains available for future changes.
Further reading: MDN: how font-family selects fonts · MDN: SVG font-family and CSS · Adobe: converting type to vector paths
Find where the lettering first changes
Keep the approved logo reference beside the source document and the exported file. Compare the same variation at a similar size. Follow the file from source to export to destination so you can narrow down the problem before changing settings.
| First place it looks wrong | What to check next |
|---|---|
| The original design file | Restore the intended font and style, then compare with the approved reference before outlining. |
| The exported SVG in a browser | Check for live text, the export’s font setting and missing or altered artwork. |
| Only after importing into another app | Compare that import with the untouched export. Check how the receiving app handles the file. |
| Only on the actual website | Confirm the site uses the latest file, then inspect its SVG embedding, styles, scaling and clipping. |
Check the correct font before creating outlines
Start with an editable master and a known approved reference. If the application reports a missing font, resolve it first. Outlining the replacement freezes the replacement’s shapes; it cannot recover the intended design.
For example, if the approved logo uses a particular semibold style but the source now displays regular, converting that regular text to paths preserves the wrong weight. The outline command has done its job, but the artwork still needs correcting.
- Confirm the font family, style and any variable-font settings against the approved source.
- Check spelling, accents, punctuation, custom letter edits and ligatures.
- Compare spacing between letters, the baseline and the gap between symbol and wordmark.
- Save the editable master separately. Use export-time outlining or a clearly named delivery copy.
- Convert every text element that belongs to the fixed logo, including an approved tagline if present.
Illustrator: outline on export or in a delivery copy
Choose the approach that fits your handoff. Export-time outlining lets you retain live text in the master.
- Open the correct source artwork and choose File → Export → Export As, then select SVG.
- In SVG Options, set Font to Outlines and export.
- Open the saved SVG in a browser and compare it with the approved logo.
If you need an outlined working copy, duplicate the document, select the logo’s text and choose Type → Create Outlines. Keep the letter shapes and their internal spaces intact; there is no need to release compound paths just to export a normal wordmark.
Using Save As or Save a Copy instead? That SVG dialog labels the font option Convert To Outlines. The control names differ between export workflows.
Further reading: Adobe: SVG export options · Adobe: Create Outlines · Adobe: Save As SVG options
Figma: keep Outline text enabled for the SVG
Figma documents SVG text outlining as the default. Check the setting on the export you are actually using.
- Select the approved logo frame or layers and choose SVG in the Export section.
- Open the format-specific export settings and keep Outline text enabled.
- Export the SVG and inspect the downloaded file.
This converts text in the export while leaving your source text available for editing. Disabling Outline text preserves exported text editing, so font availability needs checking in the destination.
Further reading: Figma: SVG and Outline text settings
Affinity: use a copy with text converted to curves
Affinity uses the term Convert to Curves for turning selected objects into editable vector paths. Preserve the text in your master, convert the approved lettering in a delivery copy and inspect the exported SVG. The export controls differ between the current Affinity app and Affinity Designer 2; follow the workflow for your version.
Further reading: Affinity: Move Tool and Convert to Curves
Verify the actual SVG, then its destination
Open the file you saved or downloaded, rather than relying on the design canvas or export preview. If a website processes uploads or optimizes SVGs, also inspect the file the site actually serves.
Test the SVG in its intended placement, including an image element or CSS background. Browsers can restrict external resources when SVG is used as an image, so a file that looks correct in its own browser tab may still render differently on the website.
- Compare distinctive letters, accents, ligatures and the spaces inside letters such as A, B and O.
- Check wordmark width, letter spacing, baseline and symbol alignment.
- View the logo at its intended small display size, as well as enlarged for inspection.
- Check each approved color variation on its intended background.
- Confirm that taglines and small marks were included and that no letters are clipped.
- Ask the recipient to check the exact file in the application or website where it will be used.
Further reading: MDN: SVG in image contexts · MDN: text elements in SVG
If outlined lettering still looks wrong
First confirm that the affected letters really are paths in the file being used. If they are, changing font-family will not redraw their geometry. Compare the first outlined export with the source, then work forward one stage at a time.
- Wrong letter shapes immediately after outlining: compare the source with the approved reference and check whether a font was already substituted.
- Missing inner spaces or broken shapes: inspect compound paths, fills, clipping and any cleanup applied after conversion.
- Different geometry after optimization: compare with the unoptimized export and review coordinate precision or path simplification.
- A change only on the website: inspect the served file and page styles, including fills and strokes, as well as its display size.
- Color-font lettering or special effects: check the font and app documentation. Adobe lists specific export and outline issues for OpenType-SVG color fonts.
Further reading: Adobe: SVG precision settings · Adobe: OpenType-SVG color-font issues
Keep editing and accessibility needs covered
Outlined lettering remains vector artwork, but its characters are no longer ordinary editable text. Retain the live-text master for wording changes, localization and future typography work. Outlining can also increase path data, so compare the final file size rather than assuming a smaller export.
Give the developer a suitable accessible name with the asset. For a logo that is the only content of a homepage link, an example is “Morrow Quay home.” If the same link already contains equivalent visible text, avoid a duplicate announcement. W3C’s functional-image guidance explains this distinction.
Keep ordinary headings, body copy and interface labels as real text wherever possible. Turning the logo into paths does not by itself supply its accessible name or make the website accessible.
Check the applicable font license before including font files in a handoff. Adobe Fonts, for example, distinguishes delivery of finished artwork from a client’s need for their own license when directly accessing and editing the font. Other fonts have their own terms.
Further reading: W3C WAI: accessible linked logos · Adobe Fonts: licensing FAQ
Package the checked artwork
Once the exported lettering matches the approved design, use that checked SVG as the starting point for the client’s assets. In logopack.app you can preview a package for free; downloading the logo-pack ZIP requires Pro. Check the current plans for export details.
If logopack.app warns that the SVG contains text, return to your design app and convert the approved lettering to outlines or curves. Font correction belongs in the source-design step: a package generator cannot recover the intended typeface from a substituted wordmark.
Common SVG font questions
Does converting text to outlines turn my logo into pixels?
No. Outlined letters are vector paths. Rasterizing the logo as PNG or JPG is a separate operation. Other parts of an SVG can still contain bitmap images, so inspect the whole asset.
Can I change the wording in an outlined SVG?
You can edit the vector shapes, but you cannot type a replacement phrase into those shapes as ordinary text. Update the editable master and export a fresh delivery SVG.
Can I keep live text and use a web font instead?
Yes, in a workflow that deliberately handles font loading, licensing and the destination’s SVG support. That may suit dynamic or localized graphics. For a fixed logo handed to several different tools, outlined lettering removes that font-loading dependency.
Why does the PNG look correct while the SVG changes?
The PNG has already captured the rendered lettering as pixels. An SVG with live text still asks the receiving environment to render its characters. Check the SVG’s actual text and export settings.
Further reading: MDN: using fonts in SVG
PUT IT INTO PRACTICE
Ready to prepare your pack?
logopack.app turns existing SVG artwork into an organized logo package. Preview your files, choose the available export options and check the result before handing it over.
Start with the logo pack generator, explore the sample ZIP, or compare the current plans.
Open generator