When you think of your style guide, a few things come to mind: your logo, brand colors and, of course, fonts. However, out of those elements, your fonts can be trickiest. From file types to licensing, understanding the ins and outs of fonts can be a headache.

Never fear! We’re here to help. We’ll walk you through everything you need to know about fonts in email design so you can maintain that brand consistency your customers know and love.

Font File Types

First things first! Let’s do a quick overview of the different font file types you’ll need.

• True Type Font (TTF): TTF was developed by Apple and Microsoft in the late 1980s and is the most common font format for both Mac OS and Windows.
• OpenType Font (OTF): OTF is the latest font format developed by Adobe and Microsoft. Commonly used on Mac OS and Windows, these fonts also offer ligatures, fractions and contextual glyphs.
• Web Open Font Format (WOFF): Developed in 2009, WOFF is the W3C recommendation for web fonts and is supported by most browsers.
• Embedded OpenType (EOT): EOT fonts are compact variations of Microsoft’s Open Type fonts.
• Scalable Vector Graphics (SVG): SVG fonts are text files containing the glyph outlines as if they were single vector objects to render without a font file available.

This chart shows the browser support for each font type. Due to the varying degrees of support, it’s best to include all these font types in your code when possible.

Tip: Interested in learning more about utilizing web fonts? The awesome chart above is from W3School’s in-depth run down of CSS3 Web Fonts.

Font Licensing

When choosing which fonts to use, always make sure that you are following the licensing agreement. Some fonts found on “free” font sites are only free for personal use or by donation. Any usage not following the font license could result in costly legal action and fines.

You’ll also need to verify what type of license your font has. While it might not be the most fun task, read over your font license agreement before proceeding with any usage. This will guarantee that you’re covering all the bases before you start designing. Most fonts will have a web font license available, which means it’s A-OK for email use. However, if you have materials to print, you may not be able to use the same font. Some fonts have a print-only license, which means you can’t use your chosen web font for print.

Don’t forget to check the usage numbers of the license, too! If you only purchase a single-use license for a font, it’s not valid to share on multiple computers or with your third-party design vendors. The license will outline how many computers the font can be installed on, as well as any online traffic restrictions for web fonts (meaning you pay based on how many visitors you have to your website). It’s extremely important to follow the guidelines of your font license to maintain headache-free use. Designshack did a great in-depth article called What is a font license? (And do I need one?) that may answer some more of your questions.

Some font libraries like Google Fonts are free for personal or commercial use. These are a great alternative if you don’t have a license for some of the larger type foundries.

Inbox Restrictions

Modern email inboxes have much more support for custom fonts than before, but there are still (unfortunately) some restrictions. Some inboxes like the Apple Mail app 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 toss 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 info on HTML, check out The Importance of Live Text in Email.

To ensure consistent browser rendering for your fonts, follow these tips:

• Research inbox support
  Some inboxes have limited code support. Before implementing any bells and whistles, determine what rendering issues could appear and plan how to address them. Some issues can be addressed with specialized tags like the Microsoft Office HTML & XML Reference Guide outlines. Others have available backups or fixes to put in place. Knowing the code support before you start will help ease frustrations during the troubleshooting process.
  
  
• Avoid JavaScript-based web fonts
  While sites like Typekit offer some amazing fonts for web use, most inboxes can’t run JavaScript. There are also limitations to the licensing, which may limit how many times the font can be viewed. The safest bet is to avoid these fonts in your email messages and only use them on your website or in graphics.
  
  
• Leverage CSS to use custom fonts
  A lot of inboxes support CSS in the <head> of the message body which allows the use of custom fonts in your email.
  
  
• Find your favorite Google Fonts
  The Google Font Library has hundreds of high-quality fonts which can easily be implemented into your email sends. If you’re using Listrak Composer, many popular Google Fonts are already built in and ready to use! Simply use a text-based element and the available fonts will already populate the editor’s font list. If your font isn’t available in Composer, contact your account manager to have it added!
  
  For HTML sends, simply get the @import provided and add it to your document.
  
• Purchase on Typography.com
  With a similar implementation to Google Fonts, Typography.com offers a beautiful collection of high-end fonts for use in your email messages.
  
  
• 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. These fonts will render in the same manner as Google Fonts.
  When using an uploaded custom font, you will need to use the @font-face method.
  
• Keep your code clean with an external stylesheet
  All inboxes that support @import will also support an external stylesheet, if you want to keep your styles organized and clutter-free.
  
  
• Always choose an appropriate fallback font
  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 (which is usually Times New Roman). Try to use a font of similar structure, character width and style so the experience is very similar with and without custom fonts displaying.

• Tip: Need help picking your fallback fonts? CSS Font Stack has a great overview of standard fonts and popularity by operating system.
  
  
• Test, test, test…and then test again!
  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!