Outlook 2013 Ignores font-family

Question

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?

why don't you apply an ID to your span tag and then assign a font family to the desired ID inside the external CSS? http://jsfiddle.net/BradleyIW/yj73k1du/1/ — BradleyIW, May 05 '15 at 15:44
Outlook strips the section from emails so an external CSS cannot be used. — Marc, May 05 '15 at 15:46
oh okay, thats great to know. Would any dom style be applicable via JS? or is it just pure HTML? — BradleyIW, May 05 '15 at 15:49
As far as I know it is pure HTML. Outlook 2013 uses Word (rather than webkit which 2011 uses) to display HTML so things can get a bit wacky. — Marc, May 05 '15 at 15:53
Unfortunately buddy, the only options I can see fit are the ones you've already stated if DOM style elements aren't applicable but if Outlook 2013 gets abit crazy, i'm unsure! i'll have a look around for you. — BradleyIW, May 05 '15 at 15:59

score 16 · Answer 1 · answered Sep 05 '16 at 23:36

I had this problem and found the following post that fixed the issue: https://litmus.com/community/discussions/982-outlook-overrides-font-to-times-new-roman

Basically, you need to add the following conditional css style snippet right after the body tag in the email template you want Outlook to take the desired font-family (in this case Arial, Helvetica or San-Serif) instead of the sticky MSO Times-New-Roman font:

<!--[if mso]>
<style type="text/css">
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style>
<![endif]-->

This works very well - in fact this should be marked as the answer. — MC9000, Nov 21 '17 at 06:19

score 13 · Accepted Answer · answered Aug 17 '15 at 17:09

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

score 2 · Answer 3 · answered Sep 25 '18 at 11:30

I just wanted to point out something about this font issue, that it isn't necessary to put your font-family declaration inside the body tag as CoderRoller mentioned in the previous answers.

Also I found something else about this issue, I was using a google Api's font inside the of the email like this:

And then inside the body tag:

<!--[if mso]>
    <style type="text/css">
        body, table, td {font-family: 'Playfair Display', Helvetica, sans-serif !important;}
    </style>
<![endif]-->

But Outlook doesn't agree with having a custom font like that, so then it ignores all the other fallbacks of fonts that are after your custom font, so if this is your case then just remove the custom google font, and use something like:

<!--[if mso]>
    <style type="text/css">
        body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
    </style>
<![endif]-->

I have currently this css style in the head of the HTML, I tested this with litmus, and it doesn't matter if you have the declaration inside the body tag, or in the head tag.

score 2 · Answer 4 · answered Aug 19 '19 at 21:13

2

There is a very simple solution that works. Just wrap everything inside the deprecated font element!

<font face="Arial">
<!-- content -->
</font>

answered Aug 19 '19 at 21:13

grifare

111
1
4

score 1 · Answer 5 · answered May 06 '15 at 14:20

Unfortunately in my experience the font tag is the only thing that works consistently on Outlook (and Windows Phone, go figure). You're going to want to add the standard CSS inline for your text as well because some clients don't render font's face attribute.

lejimmie · Answer 6 · 2015-05-07T08:44:45.327

1

How are you building your emails? If you are using tables then

<td style="font-family: Helvetica, Arial, sans-serif;">

Will work fine in ANY client. Only need to use a span if part of the text in the differs from the rest.

Outlook 2013 DOES NOT ignore in the header. I know this because I've built a lot of emails and I style a:visited in the header so Outlook (specifically) doesn't change them purple and it definitely works!

EDIT: A more accurate answer would be for me to say no unfortunately you have to specify the style inline everytime. (Didn't see that bit of the Question at first!)

Snippet:

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 14px; line-height: 18px; text-align: center; color: #000000;">

Some text here.....
</td>
</tr>
</table>

edited May 07 '15 at 08:44

answered May 06 '15 at 15:44

lejimmie

378
3
15

This does not work for me. "font-family" is still ignored when I add the inline style to the table, regardless of spans or other elements. Do you have documentation about what Outlook 2013 does and does not strip out? I know that media queries are stripped, maybe the whole header is not? – Marc May 06 '15 at 17:30
Media queries are ignored yeah but not id/classes in the – lejimmie May 07 '15 at 08:42
I second the above. Most Outlooks will not strip out the head styles, they just recode it to fit WordHTML. Also, are you sending this out of Outlook, or are you receiving it in Outlook? Or both? Wasn't certain on read through of your question. – Gortonington May 07 '15 at 15:10
Your example does not work for me. This is for emails sent from iContact and received in Outlook 2013. The code above works fine in Outlook 2011. Is there a way to read the source of an email to determine if iContact is removing my "font-family" styles? – Marc May 07 '15 at 16:27
Open the email in Outlook 2013 > Go to Message > Select Actions > Other Actions > View Source. . – Gortonington May 07 '15 at 20:11

score 0 · Answer 7 · answered Sep 25 '18 at 16:50

Custom font is not a universally supported feature. AOL Mail Native Android mail app (not Gmail app) Apple Mail iOS Mail Outlook 2000 Outlook.com app Outlook iOS Are the only email clients that support custom web fonts.

a useful article. https://litmus.com/blog/the-ultimate-guide-to-web-fonts

Outlook 2013 Ignores font-family

7 Answers7

Linked