Search code examples
htmlcssoutlook-2010newsletterfont-family

Outlook 2010 ignores font-family


As stated in this question (and countlessly more), you have to apply font-family to every single element in order for Outlook 2010 to display the correct font.

I did just that, but the font is still ignored.

<td width="560" style="font-family:Arial, sans-serif;margin:0px;padding:0px;vertical-align:top;" id="ext-gen1361">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non autem illum, saepe pariatur dolorum nihil consectetur! Vel doloremque omnis labore, illo sequi debitis nemo nulla soluta quia maxime suscipit dolor.<br style="font-family:Arial, sans-serif;">
    <br style="font-family:Arial, sans-serif;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, distinctio quo similique quis amet nisi nemo adipisci soluta id magni veniam quasi corrupti. Quisquam, illo placeat, aliquam sit sunt iste!<br style="font-family:Arial, sans-serif;">
    <br style="font-family:Arial, sans-serif;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima incidunt iste sed temporibus quam, non maxime optio illum explicabo laborum libero, magnam accusamus in sit officiis ducimus, repudiandae at ipsa!<br style="font-family:Arial, sans-serif;">
</td>

I use Mailchimp to send the newsletter and defined the font-family for every element like this:

* {
    font-family: Arial, sans-serif;
}

Mailchimp converts that rule to inline rules automatically, that is why even the <br /> tags have it. (Which is not the problem, by the way.)

Viewing the mail in Outlook 2010, the text is rendered using Times, not Arial. What can I do to fix this?


Solution

  • taking an answer from the golden days of HTML4(and earlier)

    Specify the font size, font face and color of text:

    <font size="3" color="red">This is some text!</font>
    <font size="2" color="blue">This is some text!</font>
    <font face="verdana" color="green">This is some text!</font>
    

    Using font face usually solved outlook woes for me.

    Basically when developping for outlook clients, use html4 only. CSS suppot is VERY VERY limited on outlook.