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

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(;
      @media screen { /* hides this rule from unsupported clients */ 
        .webfont {
           font-family: "Super Jazzy Webfont", arial, sans-serif !important;

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.

Leave a Comment