Home Resources Blog

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.

  • jer@nyquil.org

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

  • Joshua Russell

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

  • Bill Davis

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

    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

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

  • Rich

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

  • Rich

    “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

    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

    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:

  • Thomas Phinney

    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

    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.

  • Zack

    You shouldn’t be sending HTML email. Period.

  • Tony Chor

    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

    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.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free