Making Custom Font Stacks Work in Outlook
Outlook 2007, 2010 and 2013 have created limitless troubles for email developers. We have a whole whitepaper on how to address a lot of these troubles, including image gaps, image backgrounds and so on. But a bug I encountered recently—displaying custom fonts—had me pulling my hair out for a few hours, until I realized that I could game the system by using a LOT of font declarations.
The Problem
If you have a custom font in your font stack, Outlook 03, 07 and 13 will display Times New Roman instead. These Outlooks will not even fall back to the next font in your stack (as they should), they will just give up on displaying anything you chose and default to Times. Here is an example of the snippet you'd use to load a custom Google font.<link href="http://fonts.googleapis.com/css?family=Indie+Flower" rel='stylesheet' type='text/css'>
<style type="text/css">
* {font-family: 'CustomFontName', Helvetica, Arial, sans-serif !important;}
</style>
The Solution
The "fix" is easy to understand, but a bit annoying to implement. I say "fix" because it won't make your custom font show, but it will allow you to fall back to an Outlook-safe font of your choosing, instead of Times New Roman. 1. Put a generic font stack on every containing element that has text inside. Usually this is a TD, but it could be a div or anything you use to contain the text.<table>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
Your email's text here.
</td>
</tr>
</table><table>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
<span style="font-family: 'CustomFontName', Helvetica, Arial, sans-serif !important;">Your email's text here.</span>
</td>
</tr>
</table>Working Example
Just copy this code and test it (or send it to Outlook 03/07/13) to see this technique in action.<html>
<head>
<link href="http://fonts.googleapis.com/css?family=Indie+Flower" rel='stylesheet' type='text/css'>
<style type="text/css">
</style>
</head>
<body>
<table>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 20px;">
This will always be Helvetica.
</td>
</tr>
</table>
<table>
<tr>
<td style="font-family: 'Indie Flower', Helvetica, Arial, sans-serif; font-size: 20px;">
Outlook will display Times New Roman. Others will display Helvetica or Indie Flower.
</td>
</tr>
</table>
<table>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 20px;">
<span style="font-family: 'Indie Flower', Helvetica, Arial, sans-serif !important;">
Outlook will display Helvetica, others will display Indie Flower.
</span>
</td>
</tr>
</table>
</body>
</html>Outlook got you down?
Do you have any Outlook problems that grind your gears? Let us know in the comments below, and we may address it in a future blog.
