Can Outlook 2010 use a web font in an html email?

2019-01-09 04:05发布

站内文章 / HTML/CSS

35 0

我命由我不由天

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I've tried several things, including wrapping the css. Any ideas on how to get an html email Outlook 2010 to use a webfont and not default to a preinstalled font?

Here is some of the stuff I've tried:

    <style type="text/css">
    @font-face {
    font-family: 'thegirlnextdoor';
    src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot'); /* IE9 Compat Modes */
    src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */    url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.woff') format('woff'), /* Modern Browsers */
     url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.svg') format('svg'); /* Legacy iOS */
}
</style>

回答1:

The following technique does not require repetitive use of conditional comments. I have tested this extensively:

Inline your web-safe font family as usual, but with an extra classname on the element. (If you're using an automatic CSS inliner, it's OK to specify your web-safe fonts with the rest of your CSS using the .webfont classname.)
```
<td style="font-family: arial, sans-serif;" class="webfont">Text</td>
```

In the <head>, override the web-safe font family with your webfont like so:

<style type="text/css">
  @import url(http://mysuperjazzywebfont.com/webfont.css);

  @media screen { /* hides this rule from unsupported clients */ 
    .webfont {
       font-family: "Super Jazzy Webfont", arial, sans-serif !important;
    }
  }
</style>

Note: wrapping the .webfont class in the simple @media screen query simply prevents Outlook 07, 10 and 13 from mistakenly using Times New Roman instead of your fallback fonts. Reference

These clients display the web font:

Apple Mail
iOS Mail
Android 4.2 Stock Mail Client
Lotus Notes 8
Outlook 2000
Outlook 2011
AOL Webmail (in browsers that support @media)

The following Outlook versions get Arial:

Outlook 2002
Outlook 2003
Outlook 2007 (instead of Times New Roman)
Outlook 2010 (instead of Times New Roman)
Outlook 2013 (instead of Times New Roman)

... and numerous other more predictable clients get Arial.

回答2:

Outlook '03, '07, '10 and '13 do not support webfonts. Outlook '00 and '11 do.

You also have to be mindful of the fallback. If you put in a quoted font declaration, or a webfont in the stack, unsupported Outlook versions will revert to Times New Roman, completely ignoring your font stack. After much testing, this seems to be the best solution across all clients.

Put this in your header style tag:

@import url(http://fonts.googleapis.com/css?family=Lobster);

Use it like this:

<font style="font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #000000;">
<!--[if (!mso 14)&(!mso 15)]><!--><font style="font-family: Lobster, 'Lobster', Arial, Helvetica, sans-serif; font-size: 18px; color: #000000;"><!--<![endif]-->
Your text here
<!--[if (!mso 14)&(!mso 15)]><!--></font><!--<![endif]-->
</font>

This should work in clients that support webfonts, and gracefully fall back to the font-stack in the rest. You could also declare your outer stack in a <td> if you prefer.

Yes I know, Lobster is an ugly webfont, but it worked well for testing...

回答3:

I personally have never tried to do this, but since you have defined the font face, I would try the following to see if it will get applied:

html, body{
    font-family: 'thegirlnextdoor', sans-serif !important;
}

If you have additional preferences to the font-family on 'thegirlnextdoor' not downloading properly, you can add it after it like I have done with adding the sans-serif font-family.

Do note that if using this in a web mail client, the snippet my have undesirable effects. If that is the case, you will need to find the section to apply it to. For example, only apply it to p tags. In most case, it would probably be safest to define a class and apply it yourself:

<style>
    @font-face {
        font-family: 'thegirlnextdoor';
        src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot'); /*   IE9 Compat Modes */
        src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot? #iefix') format('embedded-opentype'), /* IE6-IE8 */      url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.woff')  format('woff'), /* Modern Browsers */
        url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.ttf')    format('truetype'), /* Safari, Android, iOS */
        url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.svg')    format('svg'); /* Legacy iOS */
    }

    .fancy-font {
        font-family: 'thegirlnextdoor', sans-serif !important;
    }
</style>

And apply it like so:

<span class="fancy-font">My e-mail title</span>

Edit

Upon finding this link and glancing over it, @font-face isn't supported by Word or Outlook. If you really want to use the font, odds are you will have to install the font to all computers that could receive the e-mail and have a suitable fallback in-case it isn't installed.

回答4:

I really like Zougen Moriver's answer. Although I worry about the <head> being stripped.

I tried hiding the font stack in a conditional statement but it didn't work for me. Neither did the @import. So I wrapped each block of copy with a font tag like so:

<span style="font-family: ProximaNova-Reg, Arial, sans-serif; font-size: 16px; color: #333333; mso-line-height-rule: exactly; line-height: 20px; text-align:left;"><font face="Arial, sans-serif;">It’s an unforgettable night of friends, thrills, memories and laughs topped off with a performance by TBD on the Music Plaza stage. No senior should miss this once-in-a-lifetime experience.</font></span>

It worked during testing.

This way if the <head> ever gets stripped then the fall back to Aril remains intact.

The down side is that it's tedious work to put that <font> around every block of copy.

回答5:

I like Josh Harrison's answer. But do you have to repeat this on 'mobile' breakpoints? i.e. have

@media screen {  
    h1 { font-family: Merriweather,Georgia,serif !important; }
    h2 { font-family: Merriweather,arial,sans-serif !important; }
    p { font-family: Merriweather,arial,sans-serif !important; }
}

@media screen and (max-width: 660px){
    #main_table { width:92% !important; }
    h1 { font-family: Merriweather,Georgia,serif !important; }
    h2 { font-family: Merriweather,arial,sans-serif !important; }
    p { font-family: Merriweather,arial,sans-serif !important; }
}