Does @font-face work in email?
@font-face tags are presently being removed from HTML emails on import into Campaign Monitor - if you would like to see them supported, please let us know.
We recently did a round of testing with the help of the Typekit team to see if there was a viable way to get @font-face working in popular email clients. Given the rate of image blocking in email, @font-face support would be an awesome technique to style the text in your email without the need for images.
Imagine sending an email like the one above that rendered like this in popular email clients even with images disabled.
How we tested
For testing purposes, we tried the following @font-face techniques:
- Traditional method of declaring the @font-face and the element to use that font family in
<style>in the<head> - Declared the font-face in
<style>in the<head>and then called it inline usingstyle="font-family:..." - Declared the font-face in the
<style>in the<head>and<body>using encoded data URIs and used the 2 combinations above to tie it to an element.
Because of the syntax of @font-face, there is no way to embed a font inline using src: url("...").
The results
| Desktop email clients | Result |
| Apple Mail |  Font renders |
| Entourage 2008 |  Fallback font displayed |
| Lotus Notes 6, 7 and 8.5 | Fallback font displayed |
| Outlook 2007 | Fallback font displayed |
| Outlook 2003 | Fallback font displayed |
| Thunderbird | Fallback font displayed |
| Windows Mail | Fallback font displayed |
| Web-based email clients | Result |
| AOL Web | Fallback font displayed |
| Gmail | Fallback font displayed |
| Hotmail | Fallback font displayed |
| MobileMe | Fallback font displayed |
| MySpace | Fallback font displayed |
| Mobile email clients | Result |
| iPhone | Font renders |
Unfortunately, the embedded font only rendered in Apple Mail 3 and 4, plus the iPhone. None of the other dektop email clients came to the party. On the web-based side, Yahoo! Mail and Gmail stripped the @font-face CSS from the email automatically. Because it isn’t possible to actually move @font-face inline, and all email clients strip JavaScript by default, it looks to be impossible to get @font-face to render across all the popular email clients.
We’ll be keeping a sharp eye on how @font-face and other style rules shape up in the future - until then, it’s better to stick to the web fonts you love and know. Of course, if you use our email client reports and a large percentage of your subscribers use Apple Mail and the iPhone, this might be a cool way to add some extra flair to your next email design.
3rd March
There’s only one clear solution here. Buy us all iPhones and Macs. :)
3rd March
Proof that Apple > Microsoft, or is it WebKit > Microsoft Word?
3rd March
“...and all email clients strip JavaScript by default…” So I wonder what the results would have been if a web font service that does not use JavaScript? The new Webtype service from AscenderFonts.com might be worth testing next…
3rd March
There are security concerns with @font-face (which is why IE locks it down and why Chrome doesn’t support it by default.) It’s more proof that Apple doesn’t get security.
4th March
AFAIK, Chrome does support @font-face by default.
4th March
We won’t be using this for a while then ;)
4th March
“It’s more proof that Apple doesn’t get security.”
I’d say it’s more proof that Tony Chor doesn’t get Apple! ;)
4th March
There are so many variables against success on this one…a good chunk of email clients don’t render elements from the <head> area so the @font-face declarations would not work and as Bill points out JavaScript is not supported by default in most. But future support would be great. A bit surprised it even worked in Apple Mail.
4th March
You only need to use JavaScript if you’re using an embedding service like TypeKit.
I got @font-face to work in Lotus Notes 8 using this HTML:
http://work.sharpshooter.org/miscellaneous/00001/font-face-email-1.html
4th March
Comments on comments:
The security concerns of @font-face were primarily around Microsoft’s EOT support in Windows, which have since been patched, and don’t apply to anything other than IE.
Google Chrome started having @font-face support on by default as of version 4, which shipped about a month ago.
TypeKit is not quite synonymous with @font-face, and there are other web font services which do not require JavaScript (e.g. Kernest, Typotheque).
4th March
Or you could skip the hosted services and just host the fonts yourself.
Font Squirrel provide kits of CSS/font files for lots of quality webfonts.
http://www.fontsquirrel.com/
4th March
You shouldn’t be sending HTML email. Period.
4th March
Actually, there are more concerns than just EOT support. Anything that downloads automatically is a privacy leak (web bug) like the 1 pixel gif; this is why most mail clients don’t automatically download images anymore.
11th March
It’s actually pretty good as the layout isn’t broken and the fallback font is used anyway. No reason why not to use it then.