6

I'm testing an email design with Litmus and for the life of me I cannot get my fonts to be properly set in Outlook 2007 / 2010 / 2013. Every single HTML / CSS trick / hack continues to render in Times New Roman:

`Outlook 2010 screenshot from Litmus

I'm mostly using simple tables for layout, so all content is ultimately inside a TD element.

Here are the various techniques I've tried to set the font.

My STYLE declaration: Have tried this in both the HEAD and BODY tags & neither works. 

<style>
@font-face {
    font-family: proxima-nova;
    src: url('assets/ProximaNova-Reg.otf');
}
@font-face {
    font-family: proxima-nova-blk;
    src: url('http://assets/ProximaNova-Black.otf');
}
body *, td, p, li {
    font-family: font-family:proxima-nova,'Proxima Nova Regular','Proxima Nova',verdana,sans-serif;
}
</style>

CSS STYLE attribute set on TD elements:

  <td style="font-family:proxima-nova,'Proxima Nova Regular','Proxima Nova',verdana,sans-serif; color:#FFFFFF; font-weight:300;font-size:18px;">

FONT tag with both FACE and STYLE attributes set:

<font face="proxima-nova,Proxima Nova Regular,Proxima Nova,verdana,sans-serif"  
    style="font-size:28px; 
    font-family:proxima-nova,'Proxima Nova Regular','Proxima Nova',verdana,sans-serif;">

Inline CSS STYLE attributes on all inner text elements (P, LI, A):

I am COMPLETELY baffled. On all other relevant clients everything is working as well as can be expected (i.e. fonts are rendering as I'd expect given various bugs & rendering weirdnesses), including iOS, Gmail, Outlook 2003 / Express, etc.:

enter image description here

ElBel
  • 1,954
  • 5
  • 16
  • 27

2 Answers2

9

I traced the issue to my STYLE declaration, which uses the @font-face to pull in a custom font file for supporting clients (i.e. Apple). Apparently, something about this use of the @font-face declaration breaks in Outlook 2007 - 20013. 

<style>
@font-face {
    font-family: proxima-nova;
    src: url('http://assets/ProximaNova-Reg.otf');
}
@font-face {
    font-family: proxima-nova-blk;
    src: url('http://assets/ProximaNova-Black.otf');
}
</style>

I needed to get MS Outlook to ignore this STYLE tag, so I wrapped the entire block with the [if !mso] tag:

<!--[if !mso]><!-->
<style>
@font-face {
...  
}
</style>
<!--<![endif]-->

Wow, that was driving me crazy.

ElBel
  • 1,954
  • 5
  • 16
  • 27
1

I've tried your solution with the [if !mso] tag, but for some reason it wouldn't work. I eventually found a different solution:

You can use the font-tag with the face-attribute to force the right fallback-font in clients like Outlook 2007/2010/2013. For example:

<td style="color:#FFFFFF; font-weight:300;font-size:18px;">
    <font face="proxima-nova,'Proxima Nova Regular','Proxima Nova',verdana,sans-serif"
</td>

I tested this in Litmus and in Outlook 2007/2010/2013 it would fallback to Verdana and in clients who do support the custom font, it would show proxima-nova.

I hope this helps.

user2236697
  • 11
  • 1
  • Quick question — in my case I was importing a font file for users whose clients support it, i.e. Mac users. (Very few people have Proxima Nova but it's our brand font.) Were you trying to do that, or just access fonts that the user had on their machine already, with fallbacks? – ElBel Apr 29 '13 at 22:41
  • Sorry for the late reply, but yes: I was importing the font file as well, using "@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic);" – user2236697 Jul 16 '13 at 14:18