Making Custom Font Stacks Work in Outlook

Geoff Phillips | 2015-05-29T21:47:50+00:00 | email on acid logo

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 (for example, “font-family: ‘CustomFont’, Helvetica, Arial, sans-serif”), 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.

The Solution

The fix is easy to understand, but a bit annoying to implement.

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: 'CustomFont', 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.

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.

Submit a Comment