Geek Answers Handbook

Outlook 2010 does not comply with CSS, even <font> tags for each text

We need our emails to look good on machines with Helvetic Neue. So, our font stack:

font-family: 'Helvetica Neue',HelveticaNeue,Helvetica,Arial,sans-serif;

We have style declarations in every TD, every DIV, every TABLE, even BODy and all that. However, Outlook is also torn and defaults by the ugly Times New Roman when it doesn't find the first font on this list - shouldn't it go through the fonts and show the ones that exist (Arial on Windows)?

Frustrated, we even put these style ads in ugly and time-consuming tags <font>around the text. Any text has all these declarations, and styling is done again inside the font tag <style>.

Litmus shows Outlook 2003, 2007 and 2010, demonstrating them correctly in Arial on Windows.

However, in our office all people receive these letters in Times New Roman. What am I missing? Any hints or directions as to why Outlook 2010 (the version we use) forces everyone to use Times New Roman?

Other questions, such as this Outlook 2010 redefining the font family from Arial to Times New Roman - DO NOT answer the question.

Thank! The following is sample code:

`

<table align="center" width="95%" cellpadding="8" cellspacing="8" style="font-family: 'Helvetica Neue',Helvetica,'Arial Unicode MS',Arial,sans-serif;font-size: 14px;color: #999999;border-spacing: 0;border-collapse: collapse;">
      <tr>
      <td height="18" align="center" valign="middle" style="font-family: 'Helvetica Neue',Helvetica,'Arial Unicode MS',Arial,sans-serif;font-size: 14px;color: #999999;border-top: 1px solid #dddddd;border-bottom: 1px solid #dddddd;border-collapse: collapse;">
         <span class="hide-on-small" style="font-family: 'Helvetica Neue',Helvetica,'Arial Unicode MS',Arial,sans-serif; font-size: 14px; color: #999999;  ">Rummy & Bingo Monthly<img src="http://d3cbux4et72c14.cloudfront.net/wtd2/sep.jpg" alt=" - " width="55" height="10" style="border: 0;">  </span>Issue <span style="font-family: 'Helvetica Neue',Helvetica,'Arial Unicode MS',Arial,sans-serif; font-size: 14px; color: #999999;  ">05</span> <img src="http://d3cbux4et72c14.cloudfront.net/wtd2/sep.jpg" alt=" - " width="55" height="10" style="border: 0;"> <span style="font-family: 'Helvetica Neue',Helvetica,'Arial Unicode MS',Arial,sans-serif; font-size: 14px; color: #999999; ">Aug 2013</span>
      </td>
      </tr>
      </table>

`

+4
source share
1 answer

This will solve your problem:

<style type="text/css">
    table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;}
    table td {border-collapse: collapse;}
</style>
<!--[if gte mso 9]>
    <style>.outlook { font-family: arial, sans-serif; }</style>
<![endif]-->
</head>
<body>

    <table align="center" width="95%" cellpadding="8" cellspacing="8">
        <tr>
            <td class="hide-on-small" align="center" valign="middle" style="border-top: 1px solid #dddddd;border-bottom: 1px solid #dddddd;font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 14px; color: #999999;">
                <span class="outlook">Rummy & Bingo Monthly</span>
        </td>
        </tr>
    </table>
</body>
  • I removed unnecessary repetitions of your font style declaration. There is no need to declare it anywhere other than TD.
  • I moved your font style declaration from a range to TD along with the assignment of the hide-on-small CSS class.

Outlook.  - , CSS, , , , , Outlook. CSS, , Arial. Outlook , , , , .

, CSS--, , , border = "0". style = "border-collapse: none;" .

+4

More articles:


All Articles