Skip to main content

My font renders as plain text

Customer Champion
Updated

This article explains why a custom or Google font can look correct in the editor but appear as a plain sans-serif typeface in the finished render — and what to do about each cause.

Editor vs. render font mismatch

Templified has addressed the most common causes of editor-vs-render font mismatch. Custom fonts with non-standard internal weight or width metadata should render correctly, edited font variants no longer silently render as the original, and Google Fonts load reliably in both the editor and the final render. If you were seeing a mismatch on an older template, try re-rendering it — the fix applies automatically without any changes on your end.

If the mismatch persists, work through the steps below to identify the specific cause.

Custom font: non-standard weight or width metadata

Font files contain internal metadata that describes their weight (light, regular, bold) and width (condensed, normal, expanded). Some fonts — especially those exported from custom type tools or modified manually — carry metadata that conflicts with how the font looks. When Templified's renderer reads that metadata, it may select the wrong face or fall back to a default sans-serif.

How to tell: The font appears correct in the editor but renders as a generic sans-serif in the finished image. The font name in the text layer's properties panel shows the custom font you intended.

Fix:

  1. Open the font in your type design tool (FontForge, Glyphs, RoboFont, or a similar editor).
  2. Confirm the weight class is set to Regular (400) and the width class is set to Normal (5), unless the font is intentionally a specific variant (Bold, Condensed, etc.).
  3. Export the corrected font as a new .otf, .ttf, or .woff2 file.
  4. In the Font Manager, open the My Fonts tab and delete the old file, then re-upload the corrected one.
  5. Reassign any text layers that referenced the old font entry to the newly uploaded one, then re-render.

Edited font: internal name collision with the original

If you take an existing font, modify it in a type tool, and upload the result alongside the original, both files may share the same internal family name. The renderer uses the internal name to locate and load fonts. When two uploaded fonts share that name, the renderer may load the wrong one — typically the original — and render all text in that face regardless of which entry the template references.

How to tell: You have two fonts in My Fonts that look nearly identical in the list. Text layers assigned to the edited variant render as the unedited original. The difference is only visible when you compare the rendered output carefully against the intended design.

Fix:

  1. Open the edited font file in your type design tool.
  2. Change the font family name in the name table to something distinct — for example, Avengeance GF Edit instead of Avengeance.
  3. Export the corrected file.
  4. In Font Manager → My Fonts, delete the old edited upload and upload the corrected file.
  5. Open any templates that used the old edited font entry, reassign those text layers to the newly uploaded font, and re-render.

Google Fonts: checking the font name

Google Fonts are loaded by exact family name. If the name stored in a text layer's properties doesn't exactly match a valid family in Google Fonts — including capitalization — the font will not load and the renderer falls back to a default typeface.

How to tell: The affected text layer uses a Google Font. The name in the Font field in the properties panel may be misspelled, have inconsistent capitalization, or refer to a font that has since been removed from the Google Fonts catalog.

Fix:

  1. Select the affected text layer.
  2. In the properties panel, click the Font field to open Font Manager.
  3. On the Google Fonts tab, type the intended font name in the Search fonts… box.
  4. Click the font name in the results to re-apply it. This writes the correct, verified family name back to the layer.
  5. Save the template and re-render.

How to confirm the fix worked

  1. After making your change, save the template using the save button in the editor toolbar.
  2. Render a single design that uses the affected text layer.
  3. Open the finished render and compare the typeface against what you see in the editor. If they match, the fix is complete.
  4. If the render still shows a plain sans-serif, check whether there are multiple text layers referencing the font — some layers may still point to an old or misnamed entry. Search the layer panel for any layer using the same font name.

Contact support

If you've worked through the steps above and the font still renders incorrectly, contact support at support@templified.io. Include the template name, the font name (as it appears in the Font Manager under My Fonts), and a side-by-side comparison screenshot showing what the editor displays versus what the render produces.

Related articles

Comments

0 comments

Article is closed for comments.