Skip to content

Mobile-Safe Rendering

To make an SVG render the same on a phone, check Mobile-safe rendering in the Export SVG dialog before you click Export SVG. The option is also in the Export Animated SVG dialog.

Phones and tablets often lack Arial, Helvetica, Times and Courier. A mobile browser or messaging app then substitutes its own default, such as San Francisco, Roboto or Noto, whose letters have different widths, so atom labels shift and subscripts drift away from their symbols. Mobile-safe rendering embeds a metric-compatible stand-in for each of those fonts your drawing uses, and the device falls back to it instead.

What gets embedded

Each system font maps to a Liberation face with the same letter widths, so a serif stays a serif and monospace stays monospace:

System fontEmbedded fallback
Arial, HelveticaLiberation Sans
Times, Times New RomanLiberation Serif
Courier, Courier NewLiberation Mono

Only the fonts in use are embedded, and each is cut down to the characters your text contains, so the cost is typically a few KB per font. A drawing with Arial atom labels and a Times annotation gets both Liberation Sans and Liberation Serif. The text stays selectable; nothing is converted to outlines.

During export, Molkit scans which of the four fonts appear and which characters they draw, builds a subset of each matching Liberation face, adds it as a base64 @font-face rule at the top of the SVG, and inserts the fallback into each font-family declaration right after its system font. A device that has Arial still uses Arial.

The note under the checkbox

A note under the checkbox lists the fallbacks for the current document, for example Embeds Liberation Sans (Arial), Liberation Serif (Times). While the box is unchecked it starts with Would embed instead, and a warning triangle appears next to the checkbox.

If the document uses none of the four fonts (for example, every label is in a Google font), the checkbox is disabled and the note says that no system fonts are in use, so the option is not needed for this export.

Once you turn the option on, it stays on for later SVG exports, in any document and after a reload, until you turn it off.

When to use it

Turn it on when the SVG will travel by text message, email or chat, or will be viewed on phones and tablets. For a file opened only in desktop browsers it is harmless but unnecessary.

PNG and PDF exports do not need it. A PNG is already pixels, so the viewer’s fonts never matter. A PDF sets Arial, Times and Courier text in the PDF standard fonts every reader has and embeds other fonts; see Font Embedding & Convert to Paths.

The option handles fonts only. It does not inline CSS, rasterize filters or resolve CSS variables. For a static file for PowerPoint, Word or Keynote, use Maximum compatibility in the SVG dialog, which outlines the labels and bakes in the colors.

See also