Updated! For the latest @font-face support results, take a look at our Web Fonts guide.
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
- Declared the font-face in
<head>and then called it inline using
- Declared the font-face in the
<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
|Desktop email clients||Result||Notes|
|Apple Mail||Yes||Font renders|
|Entourage 2008||No||Fallback font displayed|
|Lotus Notes 6, 7 and 8.5||No||Fallback font displayed|
|Outlook 2007||No||Fallback font displayed|
|Outlook 2003||No||Fallback font displayed|
|Thunderbird||No||Fallback font displayed|
|Windows Mail||No||Fallback font displayed|
|Web-based email clients||Result||Notes|
|AOL Web||No||Fallback font displayed|
|Gmail||No||Fallback font displayed|
|Hotmail||No||Fallback font displayed|
|MobileMe||No||Fallback font displayed|
|MySpace||No||Fallback font displayed|
|Mobile email clients||Result||Notes|
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.