Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 632
Marc Avatar asked May 05 '15 15:05

Marc


People also ask

Why is my Outlook not letting me change the font?

If you've set Outlook Express to use plain text, you won't be able to make any changes to the font used in your messages. Plain text, as the name implies, doesn't accept any formatting at all. To change this setting, open the "Tools" menu and select "Options." Open the "Send" tab and choose "HTML" as the email format.

How do you force font-family?

You could select all the children elements using . parent * and then set font-family to inherit . This will effectively override the child element font and force all children elements to inherit the value of whatever the closest parent element's font is. And if you only want to target the .

Why does my font keep changing in Outlook?

Please navigate to file>options>mail>stationary and fonts , and there you can set the font to your desired size. If the above suggestion doesn't work, kindly try to open Outlook in safe mode to see if your font keeps changing due to a third party.


5 Answers

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]-->
like image 104
CoderRoller Avatar answered Oct 27 '22 12:10

CoderRoller


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

like image 31
Marc Avatar answered Oct 27 '22 11:10

Marc


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.

like image 32
Leo Avatar answered Oct 27 '22 13:10

Leo


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>
like image 1
lejimmie Avatar answered Oct 27 '22 13:10

lejimmie


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

<font face="Arial">
<!-- content -->
</font>
like image 1
grifare Avatar answered Oct 27 '22 13:10

grifare