If MS Word can render custom fonts, shouldn't that mean Outlook can render custom fonts? - html-email

Question

It's common knowledge that Outlook uses Word to render emails. It's also fairly widely known in the HTML email community that Outlook will render a custom font as Times New Roman.
Currently, I hide my font statement from Outlook using conditional statements, and then set Arial as the font. But it occurs to me that Word can use custom fonts, so does anyone know why Outlook can't? And does that mean it can but we haven't worked it out yet?

Answer 1

Microsoft Word and Outlook can display any font that's installed on a system, but Outlook cannot display a remotely referenced font. Outlook can display any font, custom or not, as long as it's installed in a user's local system. But it cannot display a non-system font that's referenced on a remote server.
Let's use Open Sans as an example. Open Sans doesn't come pre-installed on most computers, but it is freely available to download and install from Google Fonts. If you send an email with Open Sans in the font stack and someone with that font installed on their system opens it in Outlook, Outlook will display Open Sans.
However Outlook is not able to display remote fonts. So if a user above does not have Open Sans on their system, Outlook is not able to reference a copy of the font on a remote server to display it.
<!-- Outlook doesn't support this -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
Not only does Outlook not support remote fonts, but it chokes on the reference above and display Times New Roman instead (as you mention). This can be fixed by placing the font reference inside a tag that Outlook ignores, like so:
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. -->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!--<![endif]-->
I hope this helps explain how fonts work in Outlook!