Web Fonts in Email

We recently had a client ask to use the Open Sans web font in an email campaign, which we eventually got working, so I thought I’d share the process. The client has a large amount of mobile users, so the priority was to get support in Android and iOS. In this case, the font had to be used for branding reasons, but using web fonts in email could be a useful technique to help avoid building text (especially headlines) as images – this both helps images-off performance and also saves many a responsive headache.

First off, here’s where we had support for Open Sans, with other email clients defaulting back to Arial:

Email clients that support web fonts:

• Android Mail*
• AOL Mail
• Apple iPhone
• Apple iPad
• Apple Mail
• Outlook 2011 (Mac)

*Note that only Open Sans and other Android-native fonts are supported in Android mail

We pulled in the font from Google Fonts, which helpfully takes care of hosting the font files for you. There’s a vast array of fonts there, however if you use any that aren’t also bundled in with Android then you lose support there. That said, here’s a Litmus shot of web fonts working on iOS:

So how did we do it? well first we went to Google Fonts and grabbed their style:

@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 400;
 src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}

You could use @import to import a stylesheet containing this, but we preferred to open up Google’s supplied stylesheet and add this directly to the email.

Then we specified the Open Sans font like so:

<span style="font-family: 'Open Sans', Gill Sans, Arial, Helvetica, sans-serif; color:#111111; font-size:16px;line-height:26px;">

So far so good. However, as usual, Outlook likes to get involved and throw a spanner in the works. If you use @font-face in HTML email, Outlook 07/10/13 will default all text back to Times New Roman. After a long time testing various fixes, we eventually found that wrapping the font import code in a simple media query hides this from Outlook, letting it get past the ‘Open Sans’ part and default the text back to the next font.

@media screen { 
/*font import stuff*/
}

Overall, universal support for web fonts isn’t there yet, but if you have a client with a large mobile user base, and adapt a graceful degradation approach where it’s ok if fonts default back to Arial, then there’s an opportunity to do some cool stuff.