More on using webfonts in HTML email

Further to my previous post on using webfonts in HTML emailElliot over at Email Design Review has also recently posted about the process of using webfonts in HTML email.

The two most notable things that I learned from his post were:

  1. That Android will only display a range of fonts available on Android handsets (Droid Sans, Droid Serif, Open Sans), and
  2. That you can try wrapping your font import code in a media query to prevent Outlook from reverting all your type to Times New Roman.

He says:

…as usual, Outlook likes to get involved and throw a spanner in the works. If you use @font-face in HTML email, Outlook 07/10/13 will default all text back to Times New Roman. After a long time testing various fixes, we eventually found that wrapping the font import code in a simple media query hides this from Outlook, letting it get past the ‘Open Sans’ part and default the text back to the next font.

I am keen to give this a try and see if it is successful. It would be a good alternative to using the <font> tag for folks who aren’t able to do so (i.e. those using a template).

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: Mid-Week Email Design Inspiration: Typecast()

  • Gareth

    This solution doesn’t work…

    I’ve tried hiding @font-face in several different ways with no effect – still getting times new roman in Outlook 2007-2013

  • Hey Gareth,

    Try this on your cells with web fonts.

    http://dabblet.com/gist/6502547

    I find this works every time. Make sure you include a default serif or sans-serif at the end of your stack as this does sometimes trip Outlook up.