Does @font-face work in email?

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.

Fonts in email

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:

  1. Traditional method of declaring the @font-face and the element to use that font family in <style> in the <head>
  2. Declared the font-face in <style> in the <head> and then called it inline using style="font-family:..."
  3. 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 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
iPhone Yes 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.

Posted by David Greiner

14 Comments

  • jer@nyquil.org
    3rd March

    There’s only one clear solution here. Buy us all iPhones and Macs. :)

  • Joshua Russell
    3rd March

    Proof that Apple > Microsoft, or is it WebKit > Microsoft Word?

  • Bill Davis
    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…

  • Tony Chor
    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.

  • Gustavo Ferreira
    4th March

    AFAIK, Chrome does support @font-face by default.

  • Rich
    4th March

    We won’t be using this for a while then ;)

  • Rich
    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! ;)

  • Brad Dunzer
    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.

  • Derek Ahmedzai
    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

  • Thomas Phinney
    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).

  • Derek Ahmedzai
    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/

  • Zack
    4th March

    You shouldn’t be sending HTML email.  Period.

  • Tony Chor
    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.

  • Gustavs Cirulis
    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.

Sign up for free.
Then send campaigns for as little as $9/month

Create an account