发表新帖
发表新帖

Outlook 2013 Ignores font-family

前端 未结
关注
7 1453
长情又很酷
长情又很酷 2021-02-08 08:25

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:
相关标签:
7条回答
  • 温柔的废话
    2021-02-08 08:30

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

    <font face="Arial">
<!-- content -->
</font>
    0 讨论(0)
  • 你的背包
    2021-02-08 08:37

    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]-->
    0 讨论(0)
  • 耶瑟儿～
    2021-02-08 08:38

    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

    0 讨论(0)
  • 余生分开走
    2021-02-08 08:43

    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.

    0 讨论(0)
  • 独厮守ぢ
    2021-02-08 08:46

    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.

    0 讨论(0)
  • 猫巷女王i
    2021-02-08 08:48

    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

    0 讨论(0)
 看不清?
提交回复
热议问题