Blog


Repurpose your Images for Mobile Email

10.19.2011

Read More Design Emails for Mobile Devices

Get connected with Email on Acid for up-to-date news and information on the subject of email design, development, and testing!

Email Testing RSS Feed Email Test on Twitter Email Preview on Digg Email CSS on Linked In Email Simulator on Stumbled Upon

Email Testing RSS Feed Email Test on Twitter Email Preview on Digg Email CSS on Linked In Email Simulator on Stumbled Upon

By John Thies
May 24, 2010
 
 
 

The Google Font API and HTML Email

Google, in conjunction with Typekit, just released a new Font API that allows designers to easily import non-standard OS fonts into their web pages. The API uses the CSS @font-face rule but relies on their CDN to provide the data bandwidth, which is probably much faster than the bandwidth allocated to your server. After hearing about this we wanted to investigate and find out the email client support for such an API.

Email Client Support

Before we ran our test we knew a couple of clients would not display the API fonts. Understandably Gmail would not load the @font-face rule because it doesn't support embedded or linked styles. With the little support that MS Word provides for HTML standards we had a good feeling that Outlook 2007 and Outlook 2010 would not display the Font API. We also knew that the IPhone would not display the custom fonts because Google's Font API does not support SVG - Scalable Vector Graphics. With that said the Font API will also not be displayed on the iPad, iPod, or Andriod devices.

We found it very interesting, however, that there is little or no support for the CSS @font-face rule in most email clients. Only 1 client out of 17 supported Google's Font API. This comes as a surprise to us because most email clients use browser based rendering engines to display HTML email. Due to Apple Mail's HTML/CSS support track record we figured that it would surely support font embedding. Here is the list of clients we tested and their support for @font-face:

Desktop Clients Result
Apple Mail No
Entourage 2008 No
Entourage 2004 No
Outlook 2010 No
Outlook 2007 No
Outlook 2003 No
Outlook Express No
Live Mail No
Windows Mail No
Thunderbird 2 No
Thunderbird 3 Y
Web-based Clients Result
AOL Web No
Gmail No
Hotmail No
Yahoo (New) No
Yahoo (Classic) No
Mobile Clients Result
iPhone No

 

Our Conclusion: Use at your Own Risk

Although Google's Font API is a great resource and can make your job easier when designing web sites we highly recommend against using this API in HTML emails. Based on our test results there is almost no support and the one client that does support it has a very small share of the email client market. However, if you do decide to use this API we strongly suggest using a CSS font stack with the referencing API font.

Comments

Great article. I have had to work on many HTML emails and found this guild to be very helpful. I put together a list of CSS styles that are safe to use when coding html emails.
By Web Design Company on 07/16/2011

Thanks a lot for sharing, you saved me a lot of time testing smile
By Juan Capristán on 08/01/2011

Very Good Article! I was looking for something that. Thank You admin for great information.
By Police Car Auctions on 09/05/2011

great info about this. I wish that it was supported so that i can use more fonts on email newsletters but i guess i'll have to use the basic ones
By allen on 09/06/2011

John, is this still the case now a year and a half later?
By Katy on 01/23/2012

if you use script to include google fonts it works with gmail, but not in yahoo or other linux server based email clients like roundcube
By ashwin on 01/24/2012

Share Your Comment

Name:
Email:
Location:
URL:

Comment:

Remember my personal information
Notify me of follow-up comments?

Please enter the word you see in the image below:



Share/Save/Bookmark

If you haven't signed up yet, give our FREE online Email Test a try. Just drop in your code and we will instantly simulate your email in the most popular email clients!

Get connected with Email on Acid for up-to-date news and information on the subject of email design, development, and testing!

Email Testing RSS Feed Email Test on Twitter Email Preview on Digg Email CSS on Linked In Email Simulator on Stumbled Upon

Follow us on Twitter Become a Friend on Facebook Subscribe to our Blog Digg Us! Recommend on StumbleUpon