As we look around on the web, we can easily find tons of beautiful responsive website designs. Besides advanced HTML and CSS “magic”, these designs usually use very powerful typography, with beautiful fonts. This is why many businesses want to use the same, modern web fonts in their email communications as well. Sadly, these fonts are not really supported in email… Why?

To understand this we need to clarify the roots of modern webfonts. The first approach to standardize webfonts for HTML browsers started in the end of 1999. Since the standardization process was very slow lot of new technologies, required for custom fonts, emerged (based on Flash and/or Javascript), which were supported by more browsers than before. The biggest issue we have to clarify here is that different platforms support different font formats. Simply put, all the big players favor their own solutions, which led to the use of TTF/OTF/WOFF/SVG formats.

Modern web fonts started to spread on the web after 2008-2009, when @font-face and the first bulletproof embed for @font-face was introduced. This was the first, cross-browser technology which could cover all different font formats, used by platforms and browsers, without the need of 3rd party libraries like Flash, or Javascript. But, only in browsers!

The email universe is unfortunately way more complex, because of the lack of standards. The Flash / Javascript solutions cannot be used in email because of platform and/or security issues. Custom fonts always need to be linked from an outer source. This method can be considered as a security risk by the developers of email clients. They can reduce risks by simply not supporting file includes, and actually that’s what most of them do!

Currently there are three different ways of including @font-face in your emails. We tested all options. Check out the results:

Email clientdevice/typeGoogle Fonts
Google Fonts
@import
self-hosted
@font-face
Mailbox appAndroid 4.2.1 tabletsupported
Outlook appAndroid 4.2.1 tabletsupportedsupportedsupported
Android mailAndroid 4.2.1 tablet
Gmail appAndroid 4.2.1 tablet
Inbox Google appAndroid 4.2.1 tablet
Yahoo!Mail appAndroid 4.2.1 tablet
iOS MailiPhone 4ssupportedsupportedsupported
iOS MailiPad/iPad (retina)supportedsupportedsupported
iOS MailiPad Mini/ (retina)supportedsupportedsupported
iOS MailiPhone 5/5ssupportedsupportedsupported
iOS MailiPhone 6/ 6Plussupportedsupportedsupported
MailWindows Phone 8
Apple Mail 6desktop clientsupportedsupportedsupported
Lotus Notes 8desktop clientsupportedsupportedsupported
Lotus Notes 8.5desktop client
Outlook 2000desktop clientsupportedsupportedsupported
Outlook 2002desktop client
Outlook 2003desktop client
Outlook 2007desktop client
Outlook 2010desktop client
Outlook 2011 for Macdesktop clientsupportedsupportedsupported
Outlook 2013desktop client
Thunderbirddesktop clientsupportedsupported
AOL Mailwebmail
Gmailwebmail
Outlook.comwebmail
Yahoo!Mailwebmail
Unfortunately, as you can see, there’s no ultimate solution. Modern web fonts are supported in less than 50% of email clients, which is a shame, but we have to deal with it.  Till @font-face is not supported by the majority, we will encourage our users, partners and all email marketers to use web safe fonts in their email communication, if they want to deliver the same quality to all of your subscribers.

This font issue is a long debated topic in email marketing nowadays. If your subscribers mostly use iPhones, you can go for modern web fonts. But always have a plan B, with a fall back web safe font, which will look OK on other clients.

Check out Campaignmonitor or Litmus for information on how to use modern fonts if you are really desperate!

Author
greg

greg

0

  • Background Images in Modern HTML Emails Background Images in Modern HTML Emails

    This article uncovers the approaches how background images can be set in email HTML. Various email

    Read more
  • Bulletproof HTML Email Buttons - A New Line-height Based Approach Bulletproof HTML Email Buttons - A New Line-height Based Approach

    In this article I am going to put to the test the basic bulletproof button techniques,

    Read more
  • Content Images in Modern HTML Emails Content Images in Modern HTML Emails

    In the last few months I have been following the previous posts of the Modern HTML

    Read more