Web Fonts in Email
We recently had a client ask to use the Open Sans webfont 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 mailWe 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.
