Outlook 20XX and Font rendering


I've been wrangling with @font-face, font usage, and font display cross-platform for the better part of two months, trying to hit a compromise between branding and accessibility.

Gmail aside, Outlook seems to be a source of some grief.

Our company just switched from Lotus notes (bleh) to Outlook (yay?) and when I design I need to send my emails by the eyes of my extremely picky, and non-technically oriented boss.

Recently I've been using font-family statements to call on fonts that have high probability of being found locally with a few sure-fire fallbacks.

In the past I would also try to load our branded version of Futura using an @font-face call, and as many of you know already, calling on a font loaded in this manner in the Outlook render engine causes it to default to Times New Roman rather than any fallback.

Though nobody had previously described this method I successfully tested using a conditional statement to force Outlook to display a fallback.

Here's an example:

<span style="font-family: WEBFONT, Arial, san serif;" >
<!--[if gte mso 9]>
   <span style="font-family: Century Gothic, Arial, san serif;" >


<!--[if gte mso 9]>

So here's what happens -- All programs view the first span just fine.  Outlook would normally interpret this webfont call incorrectly and break, causing the font to display as Times New Roman amidst much wailing and gnashing of teeth.

By adding the condition <!--[if gte mso 9]> and the span inside of that condition we can force a new layer onto the cascade and break Outlook out of the behavior that causes that problem.  The result is better than nothing, but still depends on local fonts.

Futher Questions / Implementation:
I bring this to your attention because I want to see if there is a way of conditionally forcing font sizes as well.  I ask because whenever I send out a test email to all my proofers, all my proofers see it great with no errors.  It goes to the big boss and suddenly all the fonts are significantly larger causing the containers to expand and the email to break.

Can I then, potentially use this methodology or some other methodology to force a different rendering mode on fonts to prevent that sort of behavior?  Can I call on some arcane, dark art to prevent her preview from breaking?

I'm pretty sure this is an accessibility setting that is overriding her email font sizes, but I cant convince her that she's an isolated case and that people who have visibility issues would come to expect this sort of breakage...

In short I need some ideas.

Thanks all!

roshodgekiss roshodgekiss, 4 years ago

Hey there, rvralph - this is fabulous! Great job with this font-stack workaround; Outlook is notorious for this weirdness.

As for accessibility settings in Outlook, this is a tricky one. If you do get the opportunity to do some debugging, here's a few things you can check in Outlook.

I also found an interesting discussion on Email on Acid, which suggests a potential workaround (checking your widths), but if this doesn't apply to you, then we're in tricky territory. Interested to hear what others have to say, though!

Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
rvralph, 4 years ago

So here's what I determined.  My boss has a Font Size rule in her OS set to increase all fonts by 150%.

Way to solve this problem: No actual solution.

Way to trick boss into thinking problem is solved: Send an alternate version where all fonts are 66% original size.

My philosophy regarding this issue - Those people that are truly using accessibility with the full knowledge that they're getting older / going blind (we all are, right?) understand that much content will be thrown out of whack as a result of increasing font sizes. 

Perhaps we can educate her to use the zoom feature which also zooms images... but that's unlikely.  So until then I have to result to dirty tricks.

roshodgekiss roshodgekiss, 4 years ago

"dirty tricks" = pragmatism. You have my respect :)

Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
rvralph, 4 years ago

An interesting side note:

Apparently when using the !important attribute on CSS code that follows the

<!--[if gte mso 9]>

tags apparently causes Outlook to crap the bed and break out of any CSS formatting for that element.  For example, if I have a span that comes after that statement like:
<span style="font-size:120% !important"> Outlook will ignore the span completely and no formatting will change.

I'm assuming this behavior is a result of the ! symbol, but I dont have the time to prove that.

I did note that since spans dont strictly need to be closed within a larger element like a <td> (although this is good code to do so), that one can make a bunch of nested span statements that arent closed, saving the need to do a conditional closing statement later.

Also, since Outlook does not handle the 'line-height' attribute inline in spans but only in containers (div, td, table, etc) that one could instantiate a inner 'lining' conditional div that enforces a line-height. 

I noted this because outlook had particular problems with getting lines to move together.  One of the other fun quirks in this regard is that you should use % values rather than pixels or em because certain ranges of values in those units cause unexpected behavior like cut-off, or ignoring the value entirely (typically if it is less than 100% of the font size of that line).

You'll note that I've spent entirely too much of my life on this :)

nightjar nightjar, 4 years ago

This may be redundant rvralph, but have you tried using the font tag to get Outlook to respect your font stack?

I recently struggled with webfonts in Outlook (and it reverting to Times New Roman) but if you use the <font> tag it works fine and Outlook renders in your chosen fallback font.

I posted about it just now here, the fix was via the forums on here and Jemiina's wonderful suggestion (credits/links are all in the post).

Redferret, 4 years ago

Great tip Nightjar (and great blog by the way, stumbled on it a week ago and enjoying it!)

Just to be a bit pedantic, it's the <font> tag with the attribute of face="", you can also add size and colour to it.

Gmail app apologist
nightjar nightjar, 4 years ago

Cheers Redferret! Oh man, that is so true. Pedantic is the name of the game with this stuff! That was just a mistake on my part. I updated it and credited your eagle eye.

nightjar nightjar, 4 years ago

Further to this, Elliot over at Email Design Review also had success with putting the webfont stuff into a @media query for screen:

"After a long time testing various fixes, we eventually found that wrapping the font import code in a simple media query hides this from Outlook, letting it get past the ‘Open Sans’ part and default the text back to the next font.

@media screen {
/*font import stuff*/

I think this is an even better solution, though I haven't tried it yet!

His blog post is here.

zerocents zerocents, 4 years ago

If that doesn't work, there's always the nuclear option.

<!--[if !mso]><!-->
<link rel="stylesheet" type="text/css" href="https://your-website.com/path-to-fonts.css" media="all" />

Michael Muscat

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free