Now Showing: Web Fonts in HTML Emails

Illustration. Web Fonts in Emails e-newsletter pops up of an envelope. The email compares traditional web safe fonts on the left to custom web fonts on the right.
Share on facebook
Share on twitter
Share on pinterest
Share on linkedin

Web fonts are gaining support beyond websites and apps. While their inaccessibility hasn’t changed much, ESP and email client capabilities now support many of the HTML email development methods that developers can use to make web fonts accessible. So, what’s now showing in a computer near you? Web fonts in HTML emails!

Why Web Fonts Didn’t Work in HTML Emails Before

Designing with web fonts in HTML emails used to be bad practice.

Firstly, web fonts lacked accessibility. They were and are still not common fonts like the ones that come with computer Operating Systems. Instead, HTML email developers promoted the use of web safe fonts: Arial, Helvetica, Times, Trebuchet MS, and more of the familiars. Back in 2010, Campaign Monitor shared a collection of HTML email designs based on these web safe fonts. Indeed, web safe fonts were the norm.

Additionally, HTML email web developers encountered limitations from Email Service Providers (ESPs) and email clients alike that resulted in an inability to serve web fonts to their HTML email viewers.

A web developer can easily add a custom font to a website. For example, a web developer might use the @import rule to load custom fonts from a Content Distribution Network (CDN) like Google Fonts or Adobe Typekit. Another method to add web fonts in HTML emails is using the <link> tag to a CDN instead of the @import rule. Both methods required placement within a CSS <style> tag in the HTML document’s headers to load the fonts. Finally, a third method to add web fonts in HTML emails is to host a web font yourself (properly-licensed of course) and distribute it to your website viewers via @font-face.  Web font loads cannot be inlined; it’s these rules or not at all.

However, HTML email development has very different supports than website development. Firstly, HTML email development required inlined CSS. Additionally, some email clients just ignored and/or deleted the <head> and its contents entirely, including the <style> tag, such as Yahoo!. On the other hand, email clients like Hotmail respected the <style> as long it was included within the HTML email’s <body>. Further still, some email clients didn’t support <style> at all, like Gmail and Lotus Notes 7 (Campaign Monitor, 2010).

Methods to Add Web Fonts in HTML Emails Today

Today, web fonts in HTML emails can work rather often. Several email clients have expanded their support of HTML email development methods for adding web fonts.

For starters, more email clients respect the <style> tag, especially in the <head>. For example, Apple Mail, Outlook, and Yahoo! Support a <head> <style>. Even Gmail has expanded its support to include its Android and iOS apps, webmail, and G Suite.

Further, while HTML email support for <style> has expanded greatly, the methods to add web fonts in HTML emails has more increased support than before.

@font-face is winning over big email clients. As of this writing, Campaign Monitor’s CSS Support Guide for Email CSS indicates Apple Mail, iOS Mail, AOL, Android 4.4.4 Mail, Thunderbird, Outlook.com, and Outlook 200­0–2003 all support @font-face. That list may not seem like a lot in the grand scheme of all email clients, especially without any Gmail. However, many of these do occupy top spaces in the email client market share. Indeed, the Apple iPhone’s iOS Mail occupies the very top spot.

Similarly, the <link> method also has support like @font-face. Campaign Monitor reports <link> support in Apple Mail, iOS Mail, the native Android mail client, Outlook 2000, Outlook.com, and Thunderbird.

Lastly, @import is growing support as well. Email design authority Style Campaign conducted a test in 2015 of web font support using the @font-face, @import, and <link> methods. It concluded that @import has rather broad support, including Apple Mail, Outlook 2000, 2002, 2011 (Mac), and 2015, Apple Mail, Thunderbird, and several Android native mail clients. Popular CDNs like Google Fonts and Adobe Fonts (formerly Typekit; they changed their name in October 2018) list the @import method prominently for adding web fonts in HTML emails. Furthermore, Litmus advises the @import method over <link> because <link> blocks content rendering whereas @import is deferred. However, Style Campaign’s test also revealed that <link> slightly better supported in Samsung’s native Android mail clients.

Examples of the 3 Web Development Methods to Add Web Fonts to HTML Emails

@import

<head>
  <style>
    @import url("https://fonts.googleapis.com/css?family=Playfair+Display");
  </style>
</head>

@link

<head>
  <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
</head>

@font-face (local)

<head>
  <style>
    @font-face {
      font-family: "Playfair Display";
      src: url("./fonts/PlayfairDisplay-Regular-webfont.woff2") format("woff2"),
           url("./fonts/PlayfairDisplay-Regular-webfont.woff2") format("woff2");
    }
  </style>
</head>

@font-face (CDN)

<head>
   <style>
      @font-face {
         font-family: 'Playfair Display';
         font-style: normal;
         font-weight: 400;
         src: local('Playfair Display Regular'), local('PlayfairDisplay-Regular'), url(https://fonts.gstatic.com/s/playfairdisplay/v14/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgEM86xQ.woff2) format('woff2');
      }
   </style>
</head>

One Key Note about Adding Web Fonts in HTML Emails Using the @import Method

A common piece of advice to streamline speed and reduce server requests is condensing styles into as few files as possible. Consequently, one might choose to simply copy the CSS styles directly from Google Font’s stylesheet href/URL in place of the Google-generated <link> or @import code.

For example, the code above for @font-face (CDN) lists the URL provided in Google’s stylesheet at https://fonts.googleapis.com/css?family=Playfair+Display.

However, Chris Coyier at CSS-Tricks reveals that Google Font’s sophisticated CDN automatically matches the font to the best performing font format according to the web browser importing its styles. Therefore, it’s best to simply leave the styles where they are. While Google Font’s @import as is performs a deeper file fetch, at least the web browser only downloads the font format it wants.

(This is already an improvement to performance while retaining accessibility compared to another practice, using @font-face to source five or so font formats altogether regardless of the web browser’s preference.)

Examples of Web Fonts in HTML Emails in the Wild

Screenshot. Example of web fonts in emails from Adobe Creative Cloud.

Adobe Creative Cloud sends HTML emails using a custom font, Helvetica Neue. The welcome email above, received on 09/16/2018, applies the web font using the @import method and the CDN Adobe Fonts.

Screenshot. Example of web fonts in emails from AIGA DC Eye on Design.

The AIGA DC newsletter Eye on Design adds the web font Karla. The edition above, received 03/25/2019, applies the custom web font using the @font-face (CDN) method to Google Fonts.

Screenshot. Example of web fonts in emails from Nelnet.

Nelnet also adds custom web fonts in emails. The automated auto-payment reminders apply the popular web font Open Sans using the <link> method to Google Fonts.

How I Found the Source Code in These Emails:

Different email clients require different methods to view the source code of the HTML emails in your inbox. Here’s a couple methods that I’ve seen using my desktop computer:

Outlook 365

Right-click the email message in the Reading Pane, then select View Source. This won’t work in the Preview.

Gmail

Click the More button (the three vertical dots) beside the Reply button. Then select Show Original.

Is It Finally Time to Start Using Custom Web Fonts in HTML Emails?

Close! As mentioned previously, the various methods for adding custom web fonts to HTML emails have the support of several big and popular email clients and that support is growing. Nonetheless, web font support for HTML emails still isn’t widespread. As per the usual best web development practice, include fallback options to the custom web fonts. Find a good font stack and add some traditional web safe fonts. Dan’s Tools CSS Font Stacks is still a great resource for comparing web safe font stacks.

Start looking for custom web fonts in HTML emails “in the wild.” I’ve seen Proxima Nova from Litmus emails, XX, and YY.

So, go ahead and start add custom web fonts to your HTML email web development. Just include some web safe font stacks, too!

Also check out “HTML Email Tasks, Tips, & Tricks” for more web development and HTML email design help.