SVG to PDF Font Problems: Missing Text, Substitution, and Rasterization

Typography is the most common reason an SVG looks correct in a browser but changes after PDF export. The SVG may name a font without containing the font data. Your browser finds the typeface on your device or downloads it from a web address, while the PDF generator may have access only to a small set of built-in fonts.

The result can be substituted lettering, missing glyphs, changed line breaks, or a PDF in which the page is rendered as an image. Each outcome has a different cause and a different fix.

Why the Browser Preview Can Be Misleading#

Consider this SVG text:

<text font-family="Brand Sans" font-size="32">
  Quarterly report
</text>

The element records a family name, not the actual font file. If Brand Sans is installed locally, the preview can look perfect. On another computer the browser may fall back to Arial or a generic sans-serif font. The word becomes wider or narrower, changing alignment and line wrapping.

A remote @font-face rule adds another dependency:

@font-face {
  font-family: "Brand Sans";
  src: url("https://cdn.example.com/brand.woff2");
}

The request can fail because of CORS, authentication, an expired URL, a content security policy, or an offline environment. A converter cannot safely promise that an external font will always load.

Why Chinese and Japanese Text Often Uses Image PDF Output#

Basic PDF font families cover a limited character set. Chinese, Japanese, Korean, Arabic, Devanagari, emoji, and many symbols need appropriate font programs and character mapping. Without proper embedding, direct vector-PDF text can turn into blank squares or incorrect characters.

SVG2IMG detects non-ASCII text and custom font use. It renders those pages through the browser and places the result in an image PDF. This preserves the visible glyphs that the browser can render, but it has consequences:

• Text is not selectable
• Search does not find the words
• Copy and paste does not work
• Accessibility software cannot read the page as normal PDF text
• Quality depends on raster resolution

The conversion targets 300 DPI. Large pages may use a lower effective DPI to stay within browser memory limits.

Three Reliable Preparation Strategies#

Convert final text to outlines#

Use this for a logo, headline, product label, or other short text that must match exactly. In Illustrator, Figma, Inkscape, or another vector editor, convert the text to paths before export.

Advantages:

• No font dependency
• Letter shapes can remain vector
• Appearance is consistent across devices

Tradeoffs:

• Text is no longer editable, searchable, or accessible
• File size may grow
• Long paragraphs become cumbersome paths

Keep an editable master with live text.

Use a standard font and accept limited typography#

For basic Latin text, common families such as Helvetica, Times, Courier, Arial, generic sans-serif, serif, or monospace have the best chance of direct PDF treatment. This is suitable for simple labels and technical diagrams where typography is not brand-critical.

Do not assume that naming a common font embeds it. Always inspect the output on a device that does not have your design environment.

Preserve appearance with an image PDF#

Choose appearance mode when multilingual text, web fonts, filters, or complex layout must look like the browser preview. The page is rendered as pixels before being placed in the PDF.

This is often the right tradeoff for a one-page visual handout, charts with Japanese or Chinese labels, social graphics delivered as PDF, and review proofs that do not need text selection. It is not ideal for long documents, accessible publications, or searchable archives.

Diagnose a Changed Font#

Use this sequence before editing the artwork:

1. Open the SVG in a private browser window or a different device.
2. Check the browser console and network panel for failed font requests.
3. Inspect font-family, @font-face, and external url(...) references.
4. Compare line lengths, baseline position, and text wrapping with the source design.
5. Export once with automatic mode and once with appearance mode.
6. Decide whether exact appearance or live vector text matters more.

If the SVG already looks wrong in the browser preview, PDF settings will not repair it. Fix the source font dependency first.

Avoid False Fixes#

Increasing the PDF page size does not restore a missing font. Raising raster resolution can make correctly rendered glyphs sharper, but it cannot recover a font that never loaded.

Likewise, changing the extension from .svg to .pdf does not embed fonts. Font embedding requires access to the font file, a compatible license, correct character mapping, and support in the PDF library.

Licensing Matters#

Some fonts permit desktop use but restrict web embedding, document embedding, or redistribution. Converting lettering to outlines may still be subject to the font license. Before embedding or delivering a branded font, check its license and the client's distribution requirements.

For public web assets, prefer properly licensed web fonts with working CORS headers. For final logos, outlined shapes are generally more portable.

Export Checklist for Text-Heavy SVGs#

• Confirm every required font loads in the preview
• Use outlines for short, appearance-critical lettering
• Use image PDF mode for multilingual layouts that must match visually
• Avoid image PDF when selectable or accessible text is required
• Check small type at 100% and 400% zoom
• Test the PDF on a second device
• Keep the editable SVG and licensed font files separately

Try the source in the SVG to PDF converter and read the compatibility notice shown before download. If you only need a bitmap for a webpage or presentation, the SVG to PNG converter avoids suggesting that the text will remain searchable.