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. Some issues can be addressed with specialized tags, as outlined in the Microsoft Office HTML & XML Reference Guide. 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.
These inboxes support custom web fonts:
- Apple Mail
- AOL Mail
- iOS Mail
- Native Android Mail App
- Outlook 2000
- Outlook.com App
Some of these supported inboxes are among the most popularly used. Check out the full list here.
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.
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.
UTILIZE A LINKED CUSTOM FONT
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 this article for more information on how to code custom fonts in an email.
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.
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!