ND10
Outlook and Fallback Fonts
As I'm introducing Google fonts into my emails, I have discovered that they don't work on a few of the Outlooks. That's fine. The problem is that the fallbacks don't work either. They just display as a plain serif.
I import the Google font in the head:
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
Then place in it inline:
<span style="font-family: 'Open Sans', Arial, sans-serif;">Text</span>
So, why would it not fall back to Arial or sans-serif?
Here's a simple one line implementation for embedded fonts that doesn't break outlook:
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.
Great Solution, thank you very much!
In my experience using style selectors don't work in some web based email clients, like gmail. Instead of using the style selector I just target all <td>'s like so.
<style>
td {
font-family: 'Open Sans', Arial, sans-serif !important
}
</style>
Outlook doesn't accept !important so it ignores the td style in the <head> and sticks with the inline style.
<td style="font-family: Arial, sans-serif, 'Open Sans'"></td>
I love your work, thank you very much!
Love it! Thanks for the tip!
Thanks, Michael. So does this still give preference to Open Sans as the font of choice if it's available?
I had the same problem with Outlook 2013 and 2007 ignoring font-family tags on H1's only.
After banging my head against this problem for most of a day, the only thing that worked was adding !important to the exact same code I was using before. I hate hacks, but hopefully someone else can skip my pain.
If you can define the @font-face yourself you can
use mso-font-altAnyone know any problems with using a direct link to the font face rather than @import url or possibly better yet - can you modify an existing declaration
This is spot on! Thanks, Mike.
A lot of good answers in this discussion. But I think this one is my favorite. Thanks for figuring this out!
Hi Mike
This method looks intriguing, tell me can you possibly let me know what the url is referencing? I wish to use Montserrat so curious if this is the correct URL (http://fonts.googleapis.com/css?family=Montserrat:400,700')?
Thanks,
Claire
Below was taken from your Google Font reference (Montserrat). Add this and your mso-font-alt: and you should be good to go.
I tested this and it proved to work much better than linking to the font.
this is the most amazing thing in the whole world. thank you!!
Very very pleased I read this — thanks!
Works fine if use only @font-face declaration. This not work if also use <link> or @import declaration too in the same document.
Hey Nic,
Campaign Monitor's Stig has some good information on this blog post.
Mark is right that using conditional comments is probably the way to go. While they won't help with displaying the web font, it will allow you to override Outlook's preference to use Times New Roman.
We stopped using conditional comments for outlook because we started getting a lot of reports from clients saying their emails were being received completely blank. After extensive testing we decided to look for a different method.
Is the conditional comment necessary? Wouldn't the inline font declarations override this one anyway for other email clients if you included it without the conditional comment tags?
Hi Jason, Thanks for posting this. I tried it out but had no luck and Outlook was still rendering it with Times so I tried a few things and what I found is that if you remove the !important declaration it works.
Where does this code go? Between the <style> and </style>?
Hi Mark E
You need to use different style tags for your standard css and your mso css.
Use the code above outside of your regular css style tags.
You could try putting a style block in a conditional comment to override this.
Either put the class on the <span> you have or you may have to create another <span> inside the one you're using.
Not tested this, just an idea. I'm a bit too tied into our brand guidelines to play with webfonts at the moment but will hopefully get involved soon.
Elliot Ross from ActionRocket also found wrapping the web font import in a media query hides it from Outlook.
Love this community! Thank you both.
Why? Who knows?
My solution for this is to put a font stack into the body tag to revert back to. In this case the google font 'Open Sans' is not recognized but fonts Arial and sans-serif are overlooked as well in some outlook clients. What works for me is to put your reverted font stack in the body tag so.... body style="font-family: arial, sans-serif;".
When your inline font stack is ignored due to the inclusion of a google or web font, putting your reverted system supported fonts into the body tag will make sure they are not ignored as well in outlook clients.
Hi,
I am using 'Open Sans' in mailer, it is working fine in Windows(gmail) but looks completely different in Mac(gmail). Any help is highly appreciated..Thanks in advance!
Sorry can't seem to include my code sample for.
Hope that help any way.
I recently had a similar issue with Web Fonts and MSO defaulting to Times New Roman. I fixed it in a slightly different way
Place the following above your main style tag:
<!--[if mso]>
<style type="text/css">
body, table, td, h1, h2, h3, p, li, a {font-family: Helvetica, Arial, sans-serif !important;}
</style>
<![endif]-->
Hi all,
If you use if mso, this targets all mso, but custom fonts actually work on Outlook 2000–2003, according to this:
https://www.campaignmonitor.com/css/text-fonts/font-face/
They don't work for Outlook 2007–2016.
I wrote some code which targets Outlook 2007–2016 specifically to display Helvetica, and then custom fonts for other Outlook versions:
Thanks,
Lee.
I used the same mso conditional fall back, but the problem 2016 -2019, use the same mso 16 tag which is so annoying. The @fontface works with the webfonts in 2016-2019 but when you add the conditional it defaults to Arial in all versions, if you don't use the !important tag it shows in Times in older versions, so frustrating. Why didn't microsoft use Arial or helvetica as the default font then wouldn't need the fallback font.
!--[if mso]>
<style>
body,table,td,p,span,div {
font-family:Arial,Helvetica,serif !important;
}
</style>
<![endif]-->
Thanks
Jason
I had the same problem when sending newsletters / email alerts, After a bit of research and trying different ways around it i found that wrapping the text with
'''<font face="'Open Sans', Arial, sans-serif">Your text</font>'''
seemed to have worked.
Hello,
I am also encountering this issue in my indigocard. Don't know why its happening!!
Hi John,
Have you tried using @media screen ?
I found this a few years ago in a Litmus email newsletter.
Thanks,
Lee.