Skip to main content
All CollectionsMessage ComponentsFont Management
Preparing Your Email Fonts for Inbox Rendering
Preparing Your Email Fonts for Inbox Rendering

Learn more about different fonts supported across different browsers.

Updated over a year ago

Modern email inboxes have much more support for custom fonts than before, but there are still some restrictions. Some inboxes, such as Apple Mail, utilize HTML and CSS in a very similar manner to an internet browser, but others have extremely limited support for CSS3 and HTML5 coding. Understanding browser rendering will help you leverage your custom font usage in email sends. 

While you may think it'll be easier to put your text into an image and call it a day, there are a lot of reasons to try to include as much live HTML text as possible. For more information on HTML, check out The Importance of Live Text in Email

To ensure consistent browser rendering for your fonts, follow these suggested strategies.

Research Inbox Support

Some inboxes have limited code support. Determine what rendering issues could appear and plan how to address them. Others have available backups or fixes put in place. Knowing the code support before you start designing will help ease frustrations during the troubleshooting process.

Email Client

Web Font Support

Email Client Market Share

Apple Mail/iOS

57.72%

Gmail

29.43%

Gmail App

Yahoo! Mail

3.24%

Outlook.com

0.89%

Outlook 2019

Outlook for Mac

Outlook Office 365

Outlook App

Samsung Mail

0.24%

AOL Mail

Office 365

Some of these supported inboxes are among the most popularly used. Check out the full list here.

Web-Safe Fonts vs Web Fonts

Web-safe fonts are pre-loaded fonts everyone gets on their computers (Arial, Times New Roman). There are no additional files needed to host these fonts.

💡 These fonts are already available in Listrak Composer!

Where as Web fonts are fonts that are not pre-installed on a user's computer but are downloaded off a web browser. While a web page renders, that font is applied to the text. Because of this, the inbox support for these fonts is limited. Google Fonts, Typography.com, and Adobe Fonts are common collections of web fonts. To use these fonts in Listrak, we'll need a code snippet from the website of the applicable font. Learn more about them below:

Google Fonts

The Google Font Library has hundreds of high-quality fonts which can be easily implemented into your email sends. If you're using Listrak Composer, many popular fonts are already built in and ready to use! Simply use a text-based element and the available fonts are available in the editor's font list. 

For HTML sends, simply take the @import provided and add it to your document.

Typography.com

With a similar implementation to Google Fonts, Typography.com offers a collection of high-end fonts for use in your email messages. However, you'll still have to keep page views in mind for your licensing agreement. 

Custom Fonts

If you have a licensed custom font uploaded to a server, it's possible to use a CSS font-face import to call the files for your email. A lot of inboxes support CSS in the <head> of the message body, allowing the use of custom fonts. When using an uploaded custom font, you will need to use the @font-face method. These fonts render in the same manner as Google Fonts.

📑 Check out these articles to learn more about using Custom Fonts in Listrak.

Fallback Fonts

For inboxes that don't support custom fonts and CSS, choose a similar standard font for your font stack. Otherwise, when your custom font doesn't render, your text will display in the system default (usually Times New Roman). Try to use a font of similar structure, character width, and style so the experience is very similar with/without custom fonts displaying.

Need help selecting your fallback fonts? CSS Font Stack has a great overview of standard fonts and popularity by operating system.


Test Everything

When utilizing techniques and code which might not be supported by all inboxes, testing is more important than ever to ensure the quality of your email messages. 


Once you're on the right path to using custom fonts, your emails will now be better suited to your branding and look great in the inbox!

Did this answer your question?