Your SVG lost its font when converted to PNG — why it happens

2026-10-28

The logo looks right in your design tool and right in the browser tab where you opened the SVG. You convert it to PNG and the wordmark is suddenly in a plain system font — or a photo that sat inside the graphic has vanished. The shapes all survived; only some things went missing. There's a precise reason.

An SVG is a set of instructions, not a picture

A JPG or PNG stores pixels. An SVG stores drawing instructions: a path here, a circle there, the text "ACME" in a font called something like Brand Sans. Those instructions can also point to things outside the file: a web font loaded from a URL, a stylesheet, a photo linked by its address.

When you open the SVG directly in a browser tab, or in the program that made it, the fonts installed in that program or reachable over the network are available, so the text draws as designed.

What changes when the SVG becomes an image

Our SVG to PNG converter runs in your browser: it loads your SVG as an image — the same way a web page shows an SVG in an <img> tag — draws it onto a canvas, and saves the canvas as PNG.

Browsers deliberately run SVGs used as images in a restricted mode: no scripts, and no fetching of external resources. A web font referenced by URL is not downloaded. A linked stylesheet is not applied. An <image> element that points to a photo by address draws nothing. The text still draws, because text is part of the instructions — but in whatever fallback font the browser picks when the named one isn't available.

This is a security rule of the browser, not a setting we chose, and it applies to every tool that rasterises SVGs inside a browser page.

Fix one: convert the text to outlines

The reliable fix is to stop the SVG needing a font at all. Most vector editors have a command that converts text into outlines (sometimes called "convert to paths" or "create outlines"). The letters become ordinary shapes, drawn exactly as designed, on any machine and in any converter. Export the SVG again after converting, then convert that file to PNG.

The trade-off: outlined text is no longer editable as text. Keep your original file with live text and export an outlined copy for conversion.

Fix two: put everything inside the file

If the SVG needs linked images or a font, make them part of the file rather than references to elsewhere. Many editors can embed linked images instead of linking them, and a font can be embedded as data within the SVG's own style rules. Embedded data isn't an external fetch, so it generally survives the image-mode restriction. It makes the SVG larger; that's the price of being self-contained.

Checking before you convert

• Open the SVG in a text editor and search for @import, url( and href= that point to http addresses. Each one is something that won't load.
• Look for <text elements. If they exist and use a font that isn't a basic system font, outline them.
• Check the result preview on the page — the converter shows the PNG before you download it, so a fallback font is visible straight away.

What the PNG keeps

Transparency stays transparent — the background of an SVG with no fill comes through as see-through pixels. The PNG is drawn at the SVG's own width and height, so if you need it bigger, raise those values in the SVG before converting rather than enlarging the PNG afterwards. Nothing is uploaded; the drawing happens in your browser.

What we deliberately don't do

We don't try to fetch fonts on your SVG's behalf through a server. That would mean sending your file — or the addresses inside it — somewhere, which is exactly what this site exists not to do. A self-contained SVG converts identically everywhere; that's worth more than a workaround.

The short version

• SVGs converted in a browser load as images, and images can't fetch web fonts or linked files.
• Text falls back to another font; linked photos disappear.
• Convert text to outlines, or embed fonts and images in the file.
• Check the preview before downloading — the problem is visible immediately.