Web Fonts in Email

• Updated on: 2017-07-21
• Read original article here

Web Fonts in Email
Twitter Facebook Pinterest Google+
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*
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
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:
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
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.
Share:
Elliot Ross is Managing Director of Action Rocket , an email marketing creative agency based in London. You can find him on Twitter at @iamelliot
dilboy
Good stuff. Have you tried with other google web fonts?
http://www.elliot-ross.co.uk/ Elliot Ross
yep – the iphone screenshot is using some of the other ones, they work too, but they drop out in Android. Technically Android doesn’t seem to support webfonts, but it does have Open Sans as that’s a native font
Jody Gibbons
Interesting article. This is something I’ve just started experimenting with also. Forgive my naivity but can you host other fonts on Google if what your after isn’t on Google Fonts?
http://www.elliot-ross.co.uk/ Elliot Ross
hey Jody – yep, I just used Google fonts as it’s easier, but you could upload the font files to your server and call them from there (as long as you have the font licenses to do so)
Jody Gibbons
Great good to know, cheers for that Elliot
moonstrips
Wrapping it in a media query is genius! I was getting around that issue by using the font tag. I shall give this a try. Thanks!
Graeme
It only seems to work in AOL Mail on Chrome. Not having any luck with Firefox anyway
Elvis Adomnica
Firefox doesn’t allow you to load cross domain fonts. That is, if your fonts are hosted on example.com and the AOL mail domain is aol.com firefox won’t load the fonts.
Gary Emmette Chandler
Spent my day going a little bonkers trying to figure out exactly why Outlook 2007/10 would default to Times New Roman no matter what I did in a newsletter I was working on, when all the other email clients were defaulting to the specified backup font properly. Thanks to this post, I was able to confirm it was a conflict with Google Fonts, and fix the issue to boot.
Thank you for posting this. You are awesome. I hope the Google Gods bless this blog in return.
remi_grumeau
I’m a bit confused. Isn’t linking content to an external domain name a source of spam alert?!
Some email clients are also not loading a content if it’s url is not included in the DOM. Since this webfont is only included in the head part of the html code, it won’t be loaded on CSS compatible clients (BB10 comes first in mind, but afair there is a few others).
Isn’t the best way to do so would be to integrate the font as base64?
Vicentebelmonte
Very Interesting! Thanks for sharing!
Becs Rivett
Hi Elliot, just wanted to follow up on this. I have successfully been able to view a non-native Android web font in Android mail. Also I really could not get the screen media query to work with aforementioned font in Outlook. It works fine when I used your code and degraded gracefully but not with the font I used.
http://www.actionrocket.co Elliot Ross
ah interesting! gonna do more work on this, we’ve been playing around with @import too, which seems to get around the outlook bug