Email Fonts: Why Outlook Shows Times New Roman and the Fix

What email-safe fonts are

An email client cannot draw a font the device does not have. An email-safe font is one that is already installed on the systems your readers use, so the client never has to download anything. The font-family property itself is fine everywhere: Works in all 21. What varies is which names in the list each device can find.

The client walks your stack from left to right and uses the first font it has. End every stack with a generic family (sans-serif, serif, monospace), so a device with none of the named fonts still picks the right style instead of its default.

/* Sans-serif */
font-family: Arial, Helvetica, sans-serif;

/* Serif */
font-family: Georgia, 'Times New Roman', Times, serif;

/* Monospace */
font-family: 'Courier New', Courier, monospace;

Arial and Georgia ship with Windows and macOS. Helvetica and Times cover Apple devices that prefer them. On phones the generic family at the end usually decides, which is why it has to be there.

Which clients load web fonts

A web font is a font file the client downloads from a URL, declared with @font-face. Support is narrow: Works in 6 of 21. Not supported in Gmail, Gmail Android, Gmail iOS and 12 more.

@font-face works in Apple Mail. @font-face is not supported in Gmail. @font-face is not supported in Outlook Classic. So a web font is an upgrade for part of your list, never the font the design depends on. Every client is listed on the @font-face support page.

How to declare a web font

There are three ways to bring a font file in:

• A <link> tag to a hosted stylesheet, the snippet Google Fonts gives you. Works in 3 of 21. Not supported in Gmail, Gmail Android, Gmail iOS and 15 more.
• An @import of the same stylesheet inside a <style> block. Works in 4 of 21. Not supported in Gmail, Gmail Android, Gmail iOS and 14 more.
• An @font-face rule written directly in the <style> block, with a src pointing at a WOFF2 file you host. No extra stylesheet request, and you control the file.

Whichever you use, the rule lives in the head: an inline style attribute cannot hold an at-rule, so CSS inliners have to leave it in the <style> block. Then name the font first in each font-family and follow it with a safe stack.

Outlook Classic and Times New Roman

Outlook Classic for Windows renders email with Microsoft Word, and its font fallback does not behave like a browser's. The wider story of what Word supports is in the Outlook CSS guide. Here is what we saw in October 2026 on real installs of Outlook 2010, 2013, 2016 and 2019.

• An unknown font before Arial. A stack that put system-ui, or another font Outlook does not know, before Arial rendered in Times New Roman. Outlook did not move on to Arial the way a browser would.
• Emails that declared @font-face. Emails with @font-face rules saw Outlook render the text in Times New Roman.
• Only the first class counts. Outlook read only the first class on an element: on class="a serif" the .serif rule was lost. If you set fonts through classes, put the font class first or set the font inline.

<!-- Rendered in Times New Roman in Outlook 2010-2019 -->
<td style="font-family: system-ui, Arial, sans-serif;">

<!-- Rendered in Arial: a font Outlook knows comes first -->
<td style="font-family: Arial, sans-serif;">

The fix we verified by hand on all four versions is a style block that only Outlook reads, inside an MSO conditional comment:

<!--[if mso]>
<style>
  * { font-family: Arial, sans-serif !important; }
</style>
<![endif]-->

Both the * selector and element selectors such as td or p rendered Arial. Other clients read the conditional comment as a comment and ignore it. How these comments work is covered in MSO code for Outlook templates.

One case we have not tested: whether the * override still wins when the same email also declares @font-face. If your email uses a web font, check it in Outlook Classic before you send rather than assume.

Gmail shows the fallback

@font-face is not supported in Gmail Android. @font-face is not supported in Gmail iOS. Gmail readers get the next font in your stack, so for them the safe stack is the design. Gmail does keep font-family itself; what else its sanitizer keeps and removes is in the Gmail HTML email guide.

Email font size

Set body text to at least 14px, and 16px reads better on a phone; the accessibility guide explains why. Headings need enough difference from the body to read as headings, not a fixed number.

Some phones change sizes on their own. Mobile WebKit and Blink can enlarge text under 13px in multi-column layouts, so small print ends up bigger than intended: add -webkit-text-size-adjust: 100% to the body and keep fine print at 12px or more. If text only looks wrong in your own Outlook, check the reading pane zoom before changing the CSS: it scales what you see, not what your readers get.

A font setup that holds everywhere

Put the three parts together: the web font in the head for the clients that load it, the Outlook override in a conditional comment, and a full stack inline on every text cell for every other client, including the ones that drop the <style> block.

<head>
  <style>
    @font-face {
      font-family: 'Brand Sans';
      font-style: normal;
      font-weight: 400;
      src: url('https://example.com/fonts/brand-sans.woff2') format('woff2');
    }
  </style>

  <!-- Outlook Classic only: force a font it has -->
  <!--[if mso]>
  <style>
    * { font-family: Arial, sans-serif !important; }
  </style>
  <![endif]-->
</head>
<body>
  <table role="presentation" width="100%">
    <tr>
      <td style="font-family: 'Brand Sans', Arial, Helvetica, sans-serif;
                 font-size: 16px; line-height: 24px; color: #222222;">
        Your order has shipped.
      </td>
    </tr>
  </table>
</body>

The inline stack puts the web font before Arial, which on its own would send Outlook to Times New Roman; the override is what keeps Outlook on Arial. If you would rather not depend on it, use the safe stack alone and keep the brand font for headings set as images with real alt text.

Before sending, paste the HTML into the Emailens preview to see the fallback each client falls to, and confirm on a real Outlook Classic render when the email declares a web font.