Mobile-Safe Rendering
Mobile-safe rendering is a checkbox in the SVG export dialog that fixes one specific problem: phones and tablets often do not have the common desktop system fonts (Arial, Helvetica, Times, Courier) installed. Without them, a mobile browser or messaging app substitutes a system default such as San Francisco, Roboto, or Noto, which has different metrics, so atom labels shift and the layout looks wrong. Enabling the option embeds a small, metric-compatible fallback for each at-risk font that the document uses, so the output looks the same everywhere.
What the option does
When you check Mobile-safe rendering, Molkit post-processes the exported SVG string:
- It scans which of the four at-risk system fonts the document actually uses, and which characters appear in the text content.
- For each at-risk font in use, it builds a subset of the matching, metric-compatible Liberation face containing only the glyphs you used, and base64-embeds it through an
@font-facerule placed at the top of the document. - It rewrites each
font-familydeclaration so the matching fallback is inserted right after its system font. A device that lacks the system font then uses the embedded metric-compatible face instead of its own default.
Each system font maps to its own metric-compatible twin, so a serif stays a serif and monospace stays monospace:
| System font | Embedded fallback |
|---|---|
| Arial, Helvetica | Liberation Sans |
| Times, Times New Roman | Liberation Serif |
| Courier, Courier New | Liberation Mono |
Only the fonts your document actually uses are embedded, and only the characters you used, so the added data is small (typically a few KB per font in play). A document that mixes fonts (for example Arial atom labels alongside a Times annotation) gets a separate fallback for each. The text stays real, selectable text; it is not converted to outlined paths.
Which fallbacks will be used
Before you export, the dialog tells you exactly which fallback(s) apply to the current document, for example Embeds Liberation Sans (Arial), Liberation Serif (Times). If the document uses none of the four system fonts (for example everything is set in an embedded custom font), the option is disabled and reads No system fonts in use, because there is nothing for it to protect. A warning triangle appears next to the checkbox whenever an at-risk font is present and the option is off.
Only SVG export needs this
Mobile-safe rendering applies to SVG export only:
- PNG export rasterizes the drawing to pixels, so the result already looks exactly as rendered; the viewer’s installed fonts never matter.
- PDF export embeds the actual document fonts directly (real font binaries), so the file is self-contained.
The option therefore appears only in the SVG dialog. Exported HTML presentations apply the same protection automatically: the chemistry diagrams embedded in a downloaded presentation get the metric-compatible fallback baked into the file, so they render correctly on any device without a separate setting.
What it does not do
This option only addresses fonts. It does not flatten or inline arbitrary CSS, rasterize filters or pattern fills, or resolve CSS variables to literal values. If you need outlined labels and theme-aware CSS removed for office software, use the separate PowerPoint-compatible option instead.
When to enable it
Turn it on when:
- You plan to share the SVG by text message, email, or a chat app.
- The file will be viewed on phones or tablets.
- You want the rendered output to match what you see in Molkit regardless of the viewer’s installed fonts.
If the SVG will only be opened in a desktop browser that has the system fonts, the option is harmless but unnecessary.