@font-face and email
If you don’t know, we run a service on font-face.com which allows font hosting for use with the @font-face ccs rule. (Please see font-face.com for more information)
Anyhow, we created this HTML email and decided to - just for fun - use the @font-face style rule. We knew that support in email clients was poor, but we figured that we aught to give it a go. We asked people to send info as to wheteher it worked or not and we created this table detailing the results.
| Outlook Express - 6 (win) | Outlook - 2003 (win) | Outlook - 2007 (win) | Yahoo Mail | Google Mail | Live Mail | Mail (mac) | Evolution (linux) | |
|---|---|---|---|---|---|---|---|---|
| @font-face support |  |
|
|
|
|
|
 |
|
Note: Only TTF and EOT (IE) were created
As you can see, support for @font-face in html emails is BAAAAADDDDD! Only Mail on Mac supported it.
An additional note: It seems Outlook 2007 (win) doesn’t even fall back on the font stack. It appears as if it sees the @font-face font first in the stack, decides it cannot use it - then drops the font family altogether - ignoring the second font in the stack. To conclude, it reverts to the system font.
And then I came across something somewhat amazing..
The big find: Mobile Mail app works!
I was just browsing on my iPod Touch and I noticed that the email also worked in the Mail app! Woo!
I can also confirm this works on an iPhone
Why is this so exciting?
Mobile Safari (the web browser on an iPhone) only supports SVG fonts with @font-face - but doesn’t support TTF or OTF.
Mobile Maill app does!
I didn’t create an SVG font for this email which means it HAD to use TTF.
So we can add another column to that table…
| Outlook Express - 6 (win) | Outlook - 2003 (win) | Outlook - 2007 (win) | Yahoo Mail | Google Mail | Live Mail | Mail (mac) | Evolution (linux) | ||
|---|---|---|---|---|---|---|---|---|---|
| @font-face support | |
|
|
|
|
|
|
|
|
I’m not quite sure why i’m so excited about this - but I think it’s big news - Mail app is using a different rendering enging than mobile Safari - is it newer or older? Does this mean TTF or OTF supprt is coming to Mobile Safari?
The iphone falls back on Helvetica if no font is defined
What do you think? Leave a comment below.
Tags: @font-face, html email
It seems to work in Google Apps Premier edition too: http://www.flickr.com/photos/morten_liebach/4268913392/
I’m using plain Safari 4.0.4 on Mac OS X 10.6.2.
that’s very interesting - as it doesn’t work in Gmail. Nice find. Thanks!
I think the iPhone is defaulting to Helvetica for the test content, not using the @font-face rule.
Oh okay, i’ll look into that…. I’m not discounting it but I am surprised.
Mobile Safari doesn’t default to it. Do you know that mail behaves differently in this situation?
This needs some more investigations…..
oh dear! how embarrassed am i!
I have done some further tests….. it DOES appear to be falling back on Helvetica!
Stuff up #1 of 2010!
Thanks Jeremy, nice catch….. i will do some deleting now.