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!)

Published by

Nicole Merlin

I'm an HTML email designer and developer from Melbourne, Australia. I love email, design, typography, calligraphy and curling up with a book.

  • Pingback: More on using webfonts in HTML email()

  • vinaeco

    omg thank you 🙂

  • Nice snippet, clarified a question I had on Open Sans in emails!
    Hope you’re well 🙂

  • John Moore

    This ‘hack’ worked wonders for me. That was extremely beneficial!

  • You too mate! Glad it helped 🙂

  • kosmovinyl

    This is brilliant.Thank you, thank you, thank you. I am subscribing to your blog. 🙂

  • Taís

    After days working on this issue, your fix solved my problem. Thanks a lot!

  • Иван Фортунов

    Want to learn how to write websites? Learn HTML http://en.codebra.ru/

  • Maillard Michel

    Hey Nicole, this hack don’t work anymore.
    Try to catch a new way… You will here real soon about.