When Outlook screws up with your life, screw him back - a custom fonts rant

I've been asked recently by a client to use a custom font in their emails and we know this only could go wrong if not in all email clients at least in a few troublemakers we all know. Let's pick one at random, Outlook. Alright, alright, that wasn't random haha!

So, as you could guess by now, Outlook gave me a bit a a trouble replacing the font with Times New Roman even when the fallback was a sans serif font and do I really have to tell you how an oddity of a font Times New Roman is? It looks terrible, no wonder no one is using it, be it on websites or in email newsletters. I'm serious.

If you think there is an workaround to make Outlook mail display custom fonts then you are setting up yourself to disappointment, there is not.

However, I found the code below useful because it will force Outlook mail to display a sans serif font in my case:

<h1 style="border-collapse: collapse; font-family: 'your-client-amazing-custom-font', Arial, Helvetica, sans-serif; font-size: 30px; color: #333333; font-weight:bold;">
<!--[if (gte mso 9)|(IE)]>
<span style="font-family: Arial, Helvetica, sans-serif;">
   <![endif]-->
   Title goes here
   <!--[if (gte mso 9)|(IE)]>
</span>
<![endif]-->

Of course you can also write a conditional statement (hello, IE6 days!) for Outlook, something like this:

<!--[if mso]>
<style>
h1 {font-family: Arial, Helvetica, sans-serif;}
</style>
<![endif]-->

And BTW, since you are seeing an H1 tag in the code, you may wonder what's that about. A discussion for a future article. I just love keeping you wondering. Kidding but keep an eye for the next article ;)


Till then, happy email coding! Your friend, the email snob.