Skip to main content

Why is my selected font type not displaying properly and can I add a different font type to the builder?

Why fonts can render differently across email clients and what to do if your selected font falls back.

B
Written by Barranger

Email fonts do not behave the same way as fonts on a website. A font can look correct in the UpOrder builder or preview, but display differently once the email is opened in Gmail, Outlook, Yahoo, Apple Mail, or another inbox.

Why does this happen?

Each email client decides which fonts it will load and display. Some email clients support web fonts, some block external font files, and some only display fonts that are already installed on the customer's device.

When the selected font is not supported, the email client falls back to another font from the font stack. This is expected email behavior and does not always mean something is wrong with your UpOrder template.

For current client-by-client support details, see: Can I email @font-face?

Why does Gmail or Outlook show a different font?

Gmail and many versions of Outlook have limited support for custom web fonts in HTML email. If the font you selected relies on an external font file, these inboxes may replace it with a fallback font such as Arial, Helvetica, Times New Roman, or another system font.

Apple Mail and some other clients tend to support more web-font behavior, so the same email can look more like your selected design in Apple Mail than it does in Gmail or Outlook.

Can I add a different font to the UpOrder builder?

The UpOrder builder uses a curated font list so templates stay as consistent and reliable as possible across email clients. Custom fonts are not available as a self-serve option in the builder.

If your brand uses a font that is not listed, we usually recommend choosing the closest available font or using a strong fallback font stack instead of trying to force the exact custom font into every inbox.

Which fonts are safest?

For the most consistent results, choose fonts that are widely available across devices and email clients. System-style fonts and common email-safe fonts are usually the safest choice.

In UpOrder, Shopify Default, Arial, Helvetica, Georgia, Times New Roman, Courier New, Tahoma, Trebuchet, Lucida, and Calibri are generally more predictable than decorative or custom web fonts.

Fonts such as Roboto, Open Sans, Lato, Montserrat, Oswald, and other Google Fonts can look great in clients that support them, but they may fall back in clients that do not.

What should I do if the font changes the layout?

Fallback fonts can be wider, narrower, taller, or shorter than your selected font. If a section looks off in a test email, try:

  • Choosing a simpler font with better email support.

  • Increasing spacing around text-heavy sections.

  • Avoiding very long headings or button text.

  • Testing the email in Gmail, Outlook, and Apple Mail if those inboxes matter for your customers.

Should I turn my text into an image to preserve the exact font?

We do not recommend using images for important text, buttons, order details, discount details, or legal copy. Images can be blocked by email clients, are harder to read on small screens, and are less accessible than live text.

For logos or brand marks, using an image is normal. For important message content, live text with a reliable fallback font is the safer choice.

Please reach out to [email protected] or through the in-app chat if you have any questions.

Did this answer your question?