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

Outlook 2007/10 + Borders = Pain

I thought I had everything sorted when it comes to Outlook 2007 and 2010, but I forgot the fact that it can be so weird about borders.

The two things I learned today are:

1. Always remember to use border-collapse: collapse on your tables in Outlook, and

2. When Outlook is displaying a 2px border when you asked for a 0px border, remember that (weirdly) shorthand works better for borders in ALL email clients.

This page really helped me out — turns out that, unlike any other attributes, borders benefit from being written in shorthand, i.e:

border-top: 1px solid #000000;

So there you go. That eliminated all of my woes in Outlook, where I was trying to specify a border-bottom-width of 0px.