1. 技术文章
  2. CSS font stack substitution issues in Outlook when using Google Webfonts

CSS font stack substitution issues in Outlook when using Google Webfonts

由 拜拜、爱过 提交于 2019-11-30 12:47:09
John

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.

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>

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.

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;
}

The issue is probably occurring because your user has locally installed version of the fonts and there is a conflict.

Try @font-face import (this is the way Google WebFonts works anyways), and simply rename the font-family to something different.

E.g. 

@font-face {
    font-family: 'droid_serif';

to:

@font-face {
    font-family: 'droid_serif_alt';

Be sure to reflect the change in the rest of your markup!

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

标签
html
css
outlook
html-email
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!