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 client | device/type | Google Fonts | Google Fonts @import | self-hosted @font-face |
| Mailbox app | Android 4.2.1 tablet | – | – | supported |
| Outlook app | Android 4.2.1 tablet | supported | supported | supported |
| Android mail | Android 4.2.1 tablet | – | – | – |
| Gmail app | Android 4.2.1 tablet | – | – | – |
| Inbox Google app | Android 4.2.1 tablet | – | – | – |
| Yahoo!Mail app | Android 4.2.1 tablet | – | – | – |
| iOS Mail | iPhone 4s | supported | supported | supported |
| iOS Mail | iPad/iPad (retina) | supported | supported | supported |
| iOS Mail | iPad Mini/ (retina) | supported | supported | supported |
| iOS Mail | iPhone 5/5s | supported | supported | supported |
| iOS Mail | iPhone 6/ 6Plus | supported | supported | supported |
| Windows Phone 8 | – | – | ||
| Apple Mail 6 | desktop client | supported | supported | supported |
| Lotus Notes 8 | desktop client | supported | supported | supported |
| Lotus Notes 8.5 | desktop client | – | – | |
| Outlook 2000 | desktop client | supported | supported | supported |
| Outlook 2002 | desktop client | – | – | – |
| Outlook 2003 | desktop client | – | – | – |
| Outlook 2007 | desktop client | – | – | – |
| Outlook 2010 | desktop client | – | – | – |
| Outlook 2011 for Mac | desktop client | supported | supported | supported |
| Outlook 2013 | desktop client | – | – | |
| Thunderbird | desktop client | supported | supported | – |
| AOL Mail | webmail | – | – | – |
| Gmail | webmail | – | – | – |
| Outlook.com | webmail | – | – | – |
| Yahoo!Mail | webmail | – | – | – |
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!
