Lessons in using webfonts in HTML email

When creating an HTML email using a Google webfont, I found that it was rendering in Outlook 2007, 2010 and 2013 in Times New Roman. Even though I had a fallback of Arial.

Outlook was choking on the webfont (I tried both with and without quotes) and just disregarding the whole stack. To fix this, the <font> tag is your friend!

By adding the <font> tag with the face attribute, the issue was resolved. Note the double quotes to open the stack, and the single quotes around the name of the webfont you are using.

This fix is thanks to Jemiina’s post over at the Campaign Monitor forums. Also see Campaign Monitor’s guide to Using Webfonts in Email.

(Finally, thanks to Redferret for pointing out my mixed up use of tags and attributes!)