Email Development
Making Custom Font Stacks Work in Outlook
Email Development
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.
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="https://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>
Want to know more about support for Google fonts in email clients? Check out this blog.
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>
2. Wrap a span around the text inside this container. Include your custom font in the inline styles on this span, and make sure to add !important.
<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>
That’s it! You’ll have to add this fix to every text section in your email, which may create a bit of code bloat. This bloat shouldn’t affect your email’s deliverability, unless you go over 102k. And, because you may be wondering, I did try setting the generic font stack using a style in the <head> of the email (instead of on each container), but Outlook still displayed Times New Roman instead.
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="https://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>
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.
