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!