mbacon40 mbacon40 - 11 months ago 104
CSS Question

Outlook 2013 Ignores font-family

What is the best way to specify the font-family when coding emails for Outlook 2013? I have found that font-family is ignored when it is added inline like this:

<span style="font-family: Helvetica, Arial, sans-serif;">Text</span>


I have found that this works:

<span><font face="Helvetica, Arial, sans-serif">Text</font></span>


However, this is a pain as I have to add the tag everywhere that text is added. Wrapping a tag around several elements is ignored. Is there a way that I can set the font once and forget about it?

Answer Source

An effective way to force Outlook 2013 to use specified font stack is to wrap the text in question in a <span> and to use !important when defining the font-family. Outlook will still remove any Google fonts that are defined in the head, but other email clients will use them. Here is an example:

<head>
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
</head>

<body>
<table>
  <tr>
    <td style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
      This will always be Helvetica.
    </td>
  </tr>
</table>

<table>
  <tr>
    <td style="font-family: 'Indie Flower', Helvetica, Arial, sans-serif; font-size: 12px;">
       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: 12px;">
      <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>

This came from this awesome article: https://www.emailonacid.com/blog/article/email-development/custom-font-stacks-in-outlook