Inbox support for custom fonts

Learn about how custom fonts work in your newsletters, how they will appear for readers, limitations to know, and your options for custom fonts in Letterhead

Custom font support in email is a great deal more complicated than it is for websites. Many email tools don't tell you this, which can create confusion when your beautiful-looking email on the screen looks totally different in someone's inbox. We put together this guide to help you make the right font choices.

General advice

Here are a few things to keep in mind when using custom fonts in your emails:

  1. Check for font support: Before using a custom font, make sure to check whether it is supported by the email client you're targeting. You can use tools like Litmus or Email on Acid to test your emails in different inboxes and see how they look.

  2. Use web-safe fonts as a fallback: To ensure your email looks good even if the custom font isn't supported, it's a good idea to specify web-safe fonts as a fallback option. These fonts are widely supported across all email clients and operating systems. Letterhead provides options for you to select your fallback fonts at the channel level, in each template, and in each block in your newsletter.

  3. Use web fonts: Some email clients, such as Apple Mail and the latest versions of Outlook, now support web fonts. This means you can use custom fonts that are hosted online and specify them in your email using @font-face via Letterhead's custom CSS option. Keep in mind that this may increase the load time of your email, so it's important to optimize the size of your fonts and use a content delivery network (CDN) to host them.

  4. Be mindful of font size: When using custom fonts, it's important to consider the font size as well. Smaller font sizes may be harder to read, especially on mobile devices. It's generally a good idea to stick to a font size of at least 14px for body text and 22px for headings.

Inbox support for custom fonts

According to Litmus, the following email clients currently support web fonts: 

  • Apple Mail
  • iOS Mail (default mail app on iPhones and iPads)
  • Android Mail (default mail app; not Gmail)
  • Samsung Mail
  • Outlook for Mac
  • Outlook App (not the web version)
  • Gmail officially only supports two web fonts: Open Sans and Roboto.

This guide from Litmus provides tremendous detail.

Letterhead font options

Letterhead provides several levels of font option:

  1. Channel global settings. These will apply by default to new newsletters & templates you create. 
  2. Template settings. These will apply to new editions created from that template.
  3. Block settings. These will override channel or template settings at the block level.

For each level, you can set both your desired main font, selecting from any Google Font, and your desired fallback font, selecting from system fonts that will render on every email client.

Loading custom fonts via CSS

You can use Letterhead's custom CSS option to build your own stylesheet, including using @font-face or font import to serve custom fonts. 

Read this Litmus guide for code samples to test. Please be careful: while Letterhead will review your CSS in the background for issues and remove invalid code, attempting to load content via stylesheet can trip some spam filters and damage your domain reputation.

Customers on our Enterprise plan can get complimentary design consultation & testing from our team, including custom font support. 

For other customers, we're not able to provide code review or assist with custom fonts via CSS.