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

Question

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>

Where are you telling to `font-family` to be used? Are you sure it isn't being overridden? — Justin, Jan 30 '14 at 21:19
I guess it's being overwritten. It just uses whatever font is in the system, I believe it defaults to Times New Roman. — Matt Brown, Jan 30 '14 at 21:23

Josh Harrison · Answer 1 · 2015-01-09T08:59:35.963

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.

What's the difference of using `@media screen` vs removing it completely in favor of just `.webfont { ... }`? — Javier Villanueva, Jan 08 '15 at 18:43
A quick google reminds me. From [here](http://www.emaildesignreview.com/html-email-coding/web-fonts-in-email-1482/): "If you use @font-face in HTML email, Outlook 07/10/13 will default all text back to Times New Roman ... wrapping the font import code in a simple media query hides this from Outlook". It's to stop those versions of outlook not honouring a font stack by reverting to Times New Roman. Updated answer to reflect. — Josh Harrison, Jan 09 '15 at 08:56
Thanks for this I remember having this problem in the past and had no idea why. — Javier Villanueva, Jan 09 '15 at 20:06
Thanks from 2020, @JoshHarrison - much obliged. This is very well-explained, helpful, and obviously still relevant given how long email clients hang around. — Jack Koppa, Jan 22 '21 at 15:59

John · Answer 2 · 2014-02-18T15:53:41.910

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...

I read that gmail (and others) strip out the and tags. So everything that is not inline styled will not show. See here: https://kb.mailchimp.com/campaigns/ways-to-build/css-in-html-email (see 'Use Inline CSS'), if this is true, this technique won't work here... — olefrank, Jan 12 '18 at 09:33
@olefrank Email clients that do not support style tags can not support web-fonts, as the only way to add them to the html is via `@import`. This solution provides the largest coverage possible of those supported clients and is not a 'works on all clients' solution, which doesn't exist. BTW Gmail recently added support for style tags. — John, Jan 15 '18 at 18:39

score 0 · Answer 3 · answered Sep 04 '14 at 19:12

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.

If the `` tag gets stripped, doesn't your webfont import get stripped along with it? How/where are you importing the webfont with this solution? I'm curious... — Josh Harrison, Jan 22 '15 at 15:26
@ZougenMoriver We host webfonts on our own servers. I can't remember if it still pulls in the webfont with this solution, but at the very least it will pick up the next font in the stack (i.e. Arial in this case) as opposed to defaulting to Times. — FrankDraws, Jan 22 '15 at 17:12

score 0 · Answer 4 · edited Sep 11 '15 at 06:29

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

score -1 · Answer 5 · edited Jun 20 '20 at 09:12

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.

I tried it but it didn't work. Seems like a good idea. I would think !important would make it do something. It works when I open it in Safari, but I'm testing it in Outlook 2010, and that is a cranky program. — Matt Brown, Jan 30 '14 at 21:58
@MattBrown See my updated. Basically, Word and Outlook don't support the `@font-face` rule. — Justin, Jan 30 '14 at 22:04
[You don't need quotes around font-families](http://stackoverflow.com/a/7638833/1256925). — Joeytje50, Jan 30 '14 at 22:06
@Joeytje50 You don't need to but it is in good practice to avoid running into possible issues. — Justin, Jan 30 '14 at 22:09

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

5 Answers5

Edit

Linked