Click to Sign Up for a 7 Day Free Trial!

Email Development

Making Custom Font Stacks Work in Outlook

Email On Acid

Outlook 2007, 2010 and 2013 have created limitless troubles for email developers. We have a whole whitepaper on how to address a lot of these troubles, including image gaps, image backgrounds and so on. But a bug I encountered recently—displaying custom fonts—had me pulling my hair out for a few hours, until I realized that I could game the system by using a LOT of font declarations.

The Problem

If you have a custom font in your font stack, Outlook 03, 07 and 13 will display Times New Roman instead. These Outlooks will not even fall back to the next font in your stack (as they should), they will just give up on displaying anything you chose and default to Times.

Here is an example of the snippet you'd use to load a custom Google font.

<link href="http://fonts.googleapis.com/css?family=Indie+Flower" rel='stylesheet' type='text/css'>
<style type="text/css">
  * {font-family: 'CustomFontName', Helvetica, Arial, sans-serif !important;}
</style>

Want to know more about support for Google fonts in email clients? Check out this blog.

The Solution

The "fix" is easy to understand, but a bit annoying to implement. I say "fix" because it won't make your custom font show, but it will allow you to fall back to an Outlook-safe font of your choosing, instead of Times New Roman.

1. Put a generic font stack on every containing element that has text inside. Usually this is a TD, but it could be a div or anything you use to contain the text.

<table>
  <tr>
    <td style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
      Your email's text here.
    </td>
  </tr>
</table>


2. Wrap a span around the text inside this container. Include your custom font in the inline styles on this span, and make sure to add !important.

<table>
  <tr>
    <td style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
      <span style="font-family: 'CustomFontName', Helvetica, Arial, sans-serif !important;">Your email's text here.</span>
    </td>
  </tr>
</table>

That's it! You'll have to add this fix to every text section in your email, which may create a bit of code bloat. This bloat shouldn’t affect your email’s deliverability, unless you go over 102k. And, because you may be wondering, I did try setting the generic font stack using a style in the <head> of the email (instead of on each container), but Outlook still displayed Times New Roman instead.

Working Example

Just copy this code and test it (or send it to Outlook 03/07/13) to see this technique in action.

<html>
  <head>
    <link href="http://fonts.googleapis.com/css?family=Indie+Flower" rel='stylesheet' type='text/css'>
    <style type="text/css">
    </style>
  </head>
  <body>
 <table>
  <tr>
    <td style="font-family: Helvetica, Arial, sans-serif; font-size: 20px;">
      This will always be Helvetica.
    </td>
  </tr>
</table>

<table>
  <tr>
    <td style="font-family: 'Indie Flower', Helvetica, Arial, sans-serif; font-size: 20px;">
      Outlook will display Times New Roman. Others will display Helvetica or Indie Flower.
    </td>
  </tr>
</table>

<table>
  <tr>
    <td style="font-family: Helvetica, Arial, sans-serif; font-size: 20px;">
      <span style="font-family: 'Indie Flower', Helvetica, Arial, sans-serif !important;">
        Outlook will display Helvetica, others will display Indie Flower.
      </span>
    </td>
  </tr>
</table>
  </body>
</html>

Outlook got you down?

Do you have any Outlook problems that grind your gears? Let us know in the comments below, and we may address it in a future blog.

About the Author

Geoff Phillips

Geoff Phillips

Half writer, half email builder/fixer and half customer support, Geoff is living his dream in a role that combines his many diverse interests. Code problem or tricky client got you down? Geoff's your man.

Join the Discussion

Another way of getting around Outlook's default fallback to Times New Roman is to specify your custom font in a CSS media query. Since Outlook doesn't interpret CSS media query, it'll use the font you specified in your main style definition.
Ahmad
Ist's also possible to solve the problem with a conditional comment :

<!--[if gte mso 9]>
<style type="text/css">
h1,h2,h3,h4,h5,h6,p,a,span,td,strong{font-family: Helvetica, Arial, Verdana, sans-serif !important;}
</style>
<![endif]-->
<!-- / Outlook -->

With this technic, you have less code to write wink
khoudj
I solved this by adding an Outlook-only style-block like so:

<!--[if mso]>
<style>
.relevant-class {
font-family: Helvetica, Arial, sans-serif !important;
}
</style>
<![endif]-->

Which seems to work fine.
Stijn van der Ree
Hi! Thanks for this solution.
Another problem I have here is with images. When I use Mailchimp or our internal mail service to send the emails for our users, the images usually don't display unless the user allows it inside the email. Do you have any suggestion for his problem?

Thank you!
Marilia
This thing has been solved before, see here first comment: https://www.campaignmonitor.com/forums/topic/7594/outlook-2011-2013-defaulting-to-times-new-roman-with-import/

If you use @media screen a lot less hacks are needed. However still good to know another way, thank you!
Jessica Nordman
To make this post really helpful and thorough, you should include the recommended method for calling the custom font for Outlook - web vs. hosted, font-face vs. hosted, etc.
Jim
How would you import the custom fonts? Font face?
Mark
perfect timing! i just spent about eight hours working out the same thing last week! i think my answer was slightly different, but i can't wait to see how both work in comparison.
melinda green
Quicker and less hazzle:

<td style="font-style:helvetica,..." class="textClass">
Blabla
</td>

And in the body (or head if gmail isn't important)

<style>
*[class="textClass"] { font-family: "custom font",helvetica,...!important; }
</style>
Samson
Great timing, as I was just dealing with this last week. We began integrating some web fonts into our creative and, of course, Outlook had to rain on our parade.

I have not tried your recommended approach, but I did ultimately have success with the following:

1. Add the following conditional style in the head:
<!--[if mso]>
<style type="text/css">
.outlookFont {
font-family: Arial, Helvetica, sans-serif !important;
}
</style>
<![endif]-->

2. Use a normal font stack in the cell containing text, with the web font included: font-family: 'Roboto', Helvetica, Arial, sans-serif;

Have you had any issues with this method? Seems to be working well, so far.
Thomas Grimes
or you could just wrap your custom font declarations in a media query. Ex:

@media screen {
@font-face {
font-family: "MyAwesomFont";
src: url("MyAwesomFont.eot") format("eot"),
url("MyAwesomFont.woff") format("woff"),
url("MyAwesomFont.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
}

And proceed as you would normally
<td style="font-family:'MyAwesomFont', helvetica, arial, sans-serif;"></td>
Jim
I use this methodology

Here's a simple one line implementation for embedded fonts that doesn't break outlook:

<html>
<head>
<style>
[style*="Open Sans"] {
font-family: 'Open Sans', Arial, sans-serif !important
}
</style>
</head>
Then simply place the embedded font at the end of your font-stack:

<td style="font-family: Arial, sans-serif, 'Open Sans'"></td>
No need to mess with classes, just write your code normally smile
Be aware that the style selector is case sensitive.

I found it on Litmus.
https://litmus.com/community/code/36-outlook-and-fallback-fonts

The others on there didn't work so well for me in all scenarios but this did. I think it's less code bloat than your solution smile

Incidentally if you're making email signatures in Outlook your solution is pretty good. You may also want to surround it in <font></font>
Eoin
I've tried this method out and ran several tests in EOA. It doesn't work in any versions of Outlook other than 2011 (Mac), which doesn't need this technique to work to begin with.

I've tried using both the @import in the CSS, <link> in the header, and a combination of both methods, none work. I used Google Fonts for this test. @font-face reportedly has even worse support so I didn't bother trying with that method.

I'd love to see the results of your tests because from what I can tell, this span tag method doesn't work.

This was my code:

<td style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none; font-family:Arial, Helvetica, sans-serif;font-size:20px;line-height:24px;color:#000000;text-align:left;"><span style="font-family:'Rock Salt', Arial, Helvetica, sans-serif !important;">This is the sample test block to see if these webfonts actually work in Outlook.</span></td>
jared.greene
Thank you all for the comments! I'm excited to start testing some of these alternate methods! I think we'll have to do another blog on this soon and present all of the possible methods to make this work.

jared.greene,
Here is a shared test showing the above technique in action: https://www.emailonacid.com/app/acidtest/display/summary/backJmfKOS5ioL20MPfxU9FzIm9VhIGtzmO6vFh0hgk3V/shared

Mark & Jim,
I will add a font import example to this today, thank you for the input!
Geoff Phillips
Just so you know @font import won't work with MailChimp, you have to use <link>
Eoin
it gets slightly trickier if you are using custom fonts with a different glyph height or width than the websafe choices, and you have to actually resize the Outlook fallbacks to make them work visually in the allotted space.

1-2. declare the fallback and modern-override font styles as in this post. (you can declare different sizes, line heights, and families for each, but you can't leave the fallback styles out of the initial declaration or your text will go missing.)

3. define an Outlook conditional that REPEATS the fallback font-size, line-height, and font-family. the text won't inherit the fallback sizes from above in the resizing conditional, and for some reason, if you leave the font family out, it switches to Times New Roman.

(Google Open Sans Condensed has been declared as a linked stylesheet)


<td colspan="3" align="left" valign="top" color="#00529b" style="width:540px; text-align:left; vertical-align:top; font-family:Arial,Helvetica,sans-serif; font-size:20px; mso-line-height-rule:exactly; line-height:22px; color:#00539b; font-weight:bold;">
<span style="font-family:'Open Sans Condensed','Arial Narrow',Arial,Helvetica,sans-serif !important; font-size:28px; mso-line-height-rule:exactly; line-height:30px;">
<!--[if (gte mso 9)|(IE)]>
<span style="font-family:Arial,Helvetica,sans-serif; font-size:20px; line-height:22px;">
<![endif]-->
SUB-HEADLINE CAN BE PLACED HERE
<!--[if (gte mso 9)|(IE)]>
</span>
<![endif]-->
</span>
</td>



NOTE: you can get away without the font family re-declaration and it will look fine on EoA testing; however, as i found out this morning, native Outlook will do the swap to TNR font. Maybe this is something the EoA team needs to look into.
fahlgrenmortine
fahlgrenmortine,
I'd be happy to look into it! Can you send me a shared test that exhibits this discrepancy?
Geoff Phillips
definitely. i'm on another deadline right now, but i'll re-create it as soon as i can.
fahlgrenmortine
geoff, here is a shared test demonstrating the point i posted above. there are 4 blue pseudo-headers describing the methods; the second will be a 0 or 1-px line height in Outlook due to the line-height fix.

these 4 headers have different patterns of font/line/family styling, all in an attempt to change the size of the Outlook fallback font so it fits the space defined for Open Sans Condensed.

the goal: 20px/22px Arial for Outlook; 28px/28px Open Sans Condensed for cooperative systems.

is there somewhere i can post the compressed html file, so you can see exactly how i coded each header?

and then you can also send a real-live Outlook mail to see the discrepancy that switches the font to Times New Roman in example 3, native Outlook.

https://www.emailonacid.com/app/acidtest/display/summary/dyMm7YzQuvZlHNePFJrjBzHuPwsP0GbzB0TuUJ0caeAQK/shared
fahlgrenmortine
fahlgrenmortine,
I just tested your code (pulled from the shared test developer tools/code analysis) in a live Outlook 2013 here in the office, and it looks identical to our renderings from our system. We run all of our tests in actual clients (not emulators) so I am not sure how it could appear different.

How did you send your test to your local copy of Outlook 2013? Did you run the test in our system in the same way? Outlook is a tricky beast, but I'm sure we can get to the bottom of this.
Geoff Phillips
hmmm. we sent the regular tests and the EoA tests through a single test setup in createsend.

our client, as well as we, saw completely different fonts for case #3 in the direct-outlook test (TimesNR) and the EoA test (Arial).

the outlook versions we tested natively were 2007 and 2013 running on four different Windows 7 systems. we got the same result in all four tests.

back to the drawing board, maybe...
fahlgrenmortine
Didn't work for me in any of them apart from 2011. I just can't replicate it in EoA, even with the same code!

Would love to use this but it's just not working for everyone.
dtrimdoner
dtrimdoner,
I have just added a "working example" to make this a bit simpler. If you copy this example, does the code work for you?
Geoff Phillips
Hi Geoff,

It does work yes, the first time I read this post I thought it was about adding custom fonts to Outlook as well which is why I said it didn't work, but it does. My bad.
dtrimdoner
Getting 'Open Sans' to work in Outlook 2013 is fine, along with other clients like Gmail etc., but in Outlook 2007 anything I try doesn't stop it falling back to Times New Roman.

Any ideas?
Mark
Mark,
Did you try using the working example from above? This code should work in Outlook 2007. If you're still having trouble, you may want to post in our forum.
Geoff Phillips
mark, yes, that's exactly the problem i ran into a couple weeks ago. try my code posted above on 06/01/2015. (i posted under fahlgrenmortine, my employer.) i don't think geoff could replicate the problem i had, but this was the only thing that fixed it for me.

i can send you a full code sample if you need it.
melinda green
Outlook 2013 and Gmail? That can't be right, can it?
dtrimdoner
What about web clients like G-Mail, Yahoo on Chrome or Firefox?
Would it work there as well?
Sanish
Sanish,
In web clients, you would instead see one of the acceptable fallback fonts.
Geoff Phillips
Thanks,
How can I get the list of available font families which are in / supported by googleapis?
Can you please share some information because I tried to use "Avenir" but it didn't work out....
Sanish
Sanish,
I'm not sure what you mean. You would like to see a list of fonts that are supported by Gmail?
Geoff Phillips
No, I meant as you have mentioned to use custom fonts we need to use http://fonts.googleapis.com/CSS?font-family"any name"
So can you please share the list of font families we can use ??
Because I tried Avenir font but it doesn't work...
Thanks
Sanish
Sanish,
This isn't actually an issue with which Google fonts are supported and which aren't; it's an issue with which clients support them and which don't. If a client supports Google fonts, then all Google fonts will be supported. If it doesn't, then no Google fonts will be supported. The fix detailed in this blog prevents an Outlook bug that causes any custom font stack to fall back to Times New Roman. Instead, using this fix, you can show an Outook-safe font of your choice.

To see which clients support Google fonts, check out this blog: https://www.emailonacid.com/blog/article/email-development/google_fonts_and_html_email/
Geoff Phillips
Thanks Geoff it is nice post.
I also refer very helpful and useful blog about CSS Custom Fonts.
Please visit this helpful blog
http://www.mindstick.com/blog/707/CSS Custom Fonts#.VfFKxZc0Xcc
https://css-tricks.com/snippets/css/using-font-face/
Roy
Guys don't go that nuch long just use these.

<!--[if !mso]><!-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<!--<![endif]-->

Even you don't have to add fall back font in styling with -MSO- it will override the fall back which you use in the "td"
Shailendrasingh
Thank you sir. You are my personal hero this week. smile
Two days I lost to this Outlook crap...
Stuart
There is definately a great deal to find out about
this issue. I like all the points you've made.
tattoo in fort myers

Leave a Comment