CSS font stack substitution issues in Outlook when using Google Webfonts

Question

Using Google Webfonts in an HTML email I ran into font substitution issues in Outlook (2007,2010, etc.) that didn't occur prior to incorporating webfonts.It ignores the font stacks and goes right to Times.

This happens despite using inline fallback font stacks.

I've noticed similar issues that have been posted here before, but only as a general question, not tied to the use of webfonts. Previously all of the font fallbacks worked correctly. I'm using Litmus to conduct the email testing.

Does anyone know why this might be happening?

Link to Litmus: https://litmus.com/pub/53a33c7/screenshots

Originally linked fonts in CSS like so:

<link href='http://fonts.googleapis.com/css?family=Arvo|Droid+Serif:400,700,400italic,700italic|Roboto:300' rel='stylesheet' type='text/css'>

I also tried using @font-face and self hosted files after seeing a possible solution in another answer, but it didn't work (I updated class names too):

Except from font-face attempted workaround:

<!--[if !mso]><!--> 

@font-face {
    font-family: 'droid_serif';
    src: url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot');
    src: url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.svg#droid_serif') format('svg'),  
         url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.woff') format('woff'),
         url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.ttf') format('truetype');

    font-weight: normal;
    font-style: normal;

}
<!--<![endif]-->

Outlook specific override CSS seems to work, but there are priority issues. I don't believe Outlook recognizes the !important declaration so I've been working towards more specific selections. However, I still don't understand why this is happening and if there is a simpler fix.

Outlook Font Override Excerpt:

    <!--[if gte mso 9]>
    <style>
        /* Target Outlook 2007 and 2010 */

            h1 { font-family: 'Georgia',serif !important; font-weight:normal; }
            h1 a { font-family: 'Georgia',serif !important; font-weight:normal; }
            h2 { font-family: 'Trebuchet MS',arial, helvetica, sans-serif; font-weight:normal; }
            h3 { font-family: 'Trebuchet MS',arial, helvetica, sans-serif; }
            .cover,img.cover,a.cover {
                display: block;
                visibility: visible;

                td { font-family: 'Trebuchet MS',arial, helvetica, sans-serif; } 

                .droid { font-family: 'Georgia', serif; }
}
    </style>
    <![endif]-->

Example of problematic code:

<td height="30" colspan="3" align="left" valign="middle" class="featured">
    <h2 style="text-align: left; padding: 0; margin: 0; color: #00799f; font-family: 'Roboto',arial, helvetica, sans-serif; font-size: 21px; font-weight: 100; background: none; border-bottom: 1px solid #b1d6e2; text-decoration: none; line-height: 36px; mso-line-height-rule: exactly;">cover story</h2>
</td>

UPDATE:

I've tried the suggestion in the answers to put the webfont import code inside conditional tags that exclude Outlook to no avail.

<!--[if !mso]><!-- -->
@import url(http://www.example.css);
<!--<![endif]-->

AND

<!--[if !mso]><!-- -->
@import url(http://fonts.googleapis.com/css?family=Oxygen);
<!--<![endif]-->

UPDATE II (SOLUTION):

With all the help offered it's clear a number of seemingly minor issue all could cause this problem. The font-face method seems to be preferable to @import. Having the webfont name not be the same as the local font can cause the same issue, but that's just not what was happening with this particular email.

I had tried conditional code early on to hide the webfont import code from Outlook <!--[if !mso]><!--> altogether.

The problem was I did this within a CSS style tag in the head section. Simply placing this code in its own style tag as shown below made the difference.

I confirmed it's working as I was able to remove the extra workaround CSS code I had used to detect for version of Outlook 2007 and greater to restore h1, h2 values to the standard font stack.

<!--[if !mso]><!-->
<style type="text/css">
@font-face {
    font-family: 'oxygenlight';
    src: url('http://www----/fonts/oxygen-light-webfont.eot');
    src: url('http://www.----/fonts/oxygen-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.-----/fonts/oxygen-light-webfont.woff') format('woff'),
         url('http://www.-----/fonts/oxygen-light-webfont.ttf') format('truetype'),
         url('http://www.-----/fonts/oxygen-light-webfont.svg#oxygenlightlight') format('svg');
    font-weight: normal;
    font-style: normal;
}
</style>
<!--<![endif]-->

Solution 1

UPDATE: Here is a technique to call webfonts with fallback to the font stack in all versions of Outlook that break

Try declaring your webfont if NOT Outlook instead. The webfont might be problematic for Outlook, so not calling it at all might work. Worth a try...

Edit:

This issue has occured before with Outlook breaking when your first declared font is in quotes. This seems like an Outlook bug/limitation that is unavoidable unfortunately.

Solution 2

To get Outlook to use your font-stack instead of substituting your web-font with whatever font Outlook chooses add add a conditional comment which will only be read by Outlook to assign your font-stack backup fonts. Define your web-font but do not define it in the conditional comment so Outlook will ignore the web-font, go straight for it's conditional comment and just display Arial.

<style>
        @import url('http://www.yourdomain.com/webfont.css');
</style>

    <!--[if gte mso 9]>
        <style>
            .webfontsubstitute { font-family: arial, sans-serif; }
        </style>
    <![endif]-->

</head>
<body>

    <a href="#" target="_blank" style="font-family:superwebfont,arial,sans-serif;">
    <span class="webfontsubstitute">WEB FONT STYLED TEXT HERE</span></a>

Solution 3

I've been having this problem too and have just found quite a simple fix. Once you've imported your web font, @media screen { } can be used to single out clients which support media queries, and these happen to be the ones which support web fonts. Thus, simply specifying the font-family declaration inside and outside of this selector lets you hide specific fonts from email clients such as Outlook, so your next appropriate fallback font will be displayed, and your web font will appear nicely in clients that support it.

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);

.h1 { font-family: 'Arial', 'Helvetica', sans-serif }

@media screen {
    .h1 {
        font-family: Open Sans, 'Arial', 'Helvetica', sans-serif
    }
}

Incidentally, Campaign Monitor suggests that @import is better than @font-face in emails in general.

Solution 4

You have to use "mso-font-alt" for Font-Fallback (Outlook 2010,2013,2016):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>

    ....

    <style type="text/css">

    @font-face {
        font-family: 'droid_serif';
        src: url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot');
        src: url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.svg#droid_serif') format('svg'),  
         url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.woff') format('woff'),
         url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.ttf') format('truetype');

        font-weight: normal;
        font-style: normal;
        mso-font-alt: 'Arial';
    }

    ...

    </style>
</head>

Another trick to override custom css declarations:

<!--[if mso]>
    <style> 
      body,table tr,table td,table th,a,span,table.MsoNormalTable { 
        font-family: 'Arial', 'Helvetica', 'sans-serif' !important;  
      }
      .custom-headline{
          font-family: 'Times New Roman', 'serif' !important;
      }
    </style>
<![endif]-->

Please also have a look at: https://litmus.com/community/code/36-outlook-and-fallback-fonts

Solution 5

I remember having a similar issue awhile back. In the end I think it was the @import causing the problem and I had to use a different method to pull in the fonts.

Instead of using the @import go with a @font-face method.

@font-face {
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 400;
  src: local('Oxygen'), local('Oxygen-Regular'),     url(http://themes.googleusercontent.com/static/fonts/oxygen/v2/eAWT4YudG0otf3rlsJD6zOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}

Then use the font as you would normally:

h1 {
  font-family: 'Oxygen', sans-serif;
}

View more solutions

Comments

[jsuissa]

Sorry, just to clarify, I know the webfont is causing the issue, just trying to find best solution to get fallbacks to work.

[John]

Yes what I'm proposing is that you use the webfont link inside a [if !mso] that way Outlook never has to see it. It would be simpler than trying to teach Outlook to ignore it with workarounds

[jsuissa]

Tried a few variants on that without any luck. Will update the questions. Good suggestion though.

[jsuissa]

No luck with what you suggested but I think we're on right track. Posted edit with link to Litmus test in email.

[John]

Are you wrapping all sections of text in your email with their own <font> tags? You have to declare the font in every table cell, or in a font tag.

[John]

@jsuissa updated answer, but unfortunately I think this isn't going to work out...

[jsuissa]

So we're not using the font tag inline because we don't want that to override the priority of the font substitution for the email clients where we want to show webfonts. The best solution we came up with so far is using conditional Outlook code with a font stack w/o the webfont. Does that make sense?

[John]

Makes sense. The issue happens with non-web fonts too though. Any non-standard font that needs to be declared wrapped in quotation marks (ie 'Helvetica Neue' vs Helvetica) will give you the same issue. So did the conditional work?

[jsuissa]

thanks for your help with this. You were basically on the money. I just needed to have the code outside of the style tag not inside of the tag.

[tvgemert]

I was still having some troubles implementing this in my situation so I've shared a code example for this: stackoverflow.com/a/21626196/135654

[Jo.]

Any feedback on whether this works or not? Which versions of Outlook support it? If it works, that would be awesome, but with no comments or upvotes, I'm hesitant to try it.

[Nathan]

This still works, for OUtlook 2019 too. I'm referring specifically to mso-font-alt, but the second trick should still work too. I just use the first all the time because it is so easy.