Does @font-face work in email?

By David Greiner

March 03, 2010

14 Comments

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.

{title}

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
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
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
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 in:

14 Comments

  1. jer@nyquil.org
    March 3, 2010 9:42am

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

  2. Joshua Russell
    March 3, 2010 9:50am

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

  3. Bill Davis
    March 3, 2010 11:32am

    “...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…

  4. Tony Chor
    March 3, 2010 3:41pm

    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.

  5. Gustavo Ferreira
    March 3, 2010 8:24pm

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

  6. Rich
    March 4, 2010 1:15am

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

  7. Rich
    March 4, 2010 1:17am

    “It’s more proof that Apple doesn’t get security.”

    I’d say it’s more proof that Tony Chor doesn’t get Apple! ;)

  8. Brad Dunzer
    March 4, 2010 1:25am

    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.

  9. Derek Ahmedzai
    March 4, 2010 1:45am

    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

  10. Thomas Phinney
    March 4, 2010 1:58am

    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).

  11. Derek Ahmedzai
    March 4, 2010 2:02am

    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/

  12. Zack
    March 4, 2010 2:07am

    You shouldn’t be sending HTML email.  Period.

  13. Tony Chor
    March 4, 2010 12:06pm

    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.

  14. Gustavs Cirulis
    March 11, 2010 1:05am

    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.

Comments for this entry are closed.

Browse the Blog

  1. Behind the Scenes (18)
  2. Interviews & Buzz (124)
  3. New Features & Updates (201)
  4. Observations & Answers (189)
  5. Tips & Resources (368)

Explore the Email Gallery