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

前端未结

关注

 5  1585

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?

相关标签:

5条回答

灰色年华

2020-12-01 15:35
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
梦毁少年i

2020-12-01 15:38
The following technique does not require repetitive use of conditional comments. I have tested this extensively:
1. 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>
```
2. 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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
南笙

2020-12-01 15:45
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
闹比i

2020-12-01 15:46
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;">
<font style="font-family: Lobster, 'Lobster', Arial, Helvetica, sans-serif; font-size: 18px; color: #000000;">
Your text here
</font>
</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...
0 讨论(0)
发布评论:

提交评论
- 加载中...

粉色の甜心

2020-12-01 15:47

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

0 讨论(0)

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

Edit