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

by

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.

More Related Contents:

  1. How to design an HTML/CSS signature that will work in Outlook 2016? [duplicate]
  2. Can you link to a CSS file from an email?
  3. Rounded corners in outlook without images
  4. Responsive order confirmation emails for mobile devices?
  5. Can I put a … tag within the body of a HTML file to send in email?
  6. The css padding is not working in outlook
  7. Is there an equivalent of CSS max-width that works in HTML emails?
  8. CSS Not Being Responsive
  9. Bold tag breaking the divs?
  10. When to use IMG vs. CSS background-image?
  11. Add a background image (.png) to a SVG circle shape
  12. How do I make an editable DIV look like a text field?
  13. Style input element to fill remaining width of its container
  14. ‘position: sticky’ not working when ‘height’ is defined
  15. Wrap text in tag
  16. Flexbox column-reverse in Firefox, Edge and IE
  17. Make row stretch across all columns in CSS Grid
  18. Flexbox affects overflow-wrap behavior
  19. Why does a filter gradient on a pseudo element not work in IE8?
  20. How do I remove the top margin in a web page?
  21. 404 page not found – Go rendering css file
  22. Radio buttons and label to display in same line
  23. div with triangle at the bottom with background image
  24. Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques [closed]
  25. How to apply font anti-alias effects in CSS? [duplicate]
  26. Fix columns in horizontal scrolling
  27. Media queries not working inside an iframe
  28. bootstrap 4: center inline form inside a jumbotron
  29. Why does a border increase the element’s width?
  30. How do I style radio buttons with images – laughing smiley for good, sad smiley for bad?

Leave a Comment