Browse by...
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.

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.

Subscribe

Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free