Making Custom Font Stacks Work in Outlook
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.
Author: Kyle Lapaglia
Author: Kyle Lapaglia
38 thoughts on “Making Custom Font Stacks Work in Outlook”
Comments are closed.
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.
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>
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>
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!
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!
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.
How would you import the custom fonts? Font face?
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.
Quicker and less hazzle:
And in the body (or head if gmail isn’t important)
<style>
*[class=”textClass”] { font-family: “custom font”,helvetica,…!important; }
</style>
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>
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
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:
No need to mess with classes, just write your code normally 🙂
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 🙂
Incidentally if you’re making email signatures in Outlook your solution is pretty good. You may also want to surround it in
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:
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!
Just so you know @font import won’t work with MailChimp, you have to use <link>
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)
<!–[if (gte mso 9)|(IE)]>
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,
I’d be happy to look into it! Can you send me a shared test that exhibits this discrepancy?
definitely. i’m on another deadline right now, but i’ll re-create it as soon as i can.
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,
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.
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…
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,
I have just added a “working example” to make this a bit simpler. If you copy this example, does the code work for you?
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.
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,
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.
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.
Outlook 2013 and Gmail? That can’t be right, can it?
What about web clients like G-Mail, Yahoo on Chrome or Firefox?
Would it work there as well?
Sanish,
In web clients, you would instead see one of the acceptable fallback fonts.
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,
I’m not sure what you mean. You would like to see a list of fonts that are supported by Gmail?
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,
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/
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/
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’>
<!–
Thank you sir. You are my personal hero this week. 🙂
Two days I lost to this Outlook crap…
There is definately a great deal to find out about
this issue. I like all the points you’ve made.