Outlook 2007 / 2013 Not Rendering Css Font-family Declarations

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 continue

Solution 1:

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.

Solution 2:

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:

<tdstyle="color:#FFFFFF; font-weight:300;font-size:18px;"><fontface="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.