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
Gergely Mecs

Gergely Mecs

Chief Frontend Developer @ EDMdesigner.com

  • HTML Email Development Tools HTML Email Development Tools

    Would you like to improve your HTML email development workflow and learn about new developer tools? This article series is for you.

    Read more
  • Git Branching Workflows in SaaS Development and the Review ASAP Policy Git Branching Workflows in SaaS Development and the Review ASAP Policy

    This article shows you a git branching workflow which helps developers to review changes frequently, leading to better code quality.

    Read more
  • Tabular Data Representation in Modern HTML Emails Tabular Data Representation in Modern HTML Emails

    Responsive tables are the most common ways to represent tabular data in HTML emails. Learn about the best practices and the card layout design approach.

    Read more