How to Fix Custom Font Fallbacks Crashing to Times New Roman in Outlook

We've all seen it before: a beautifully designed email with a custom font family, only to open in Outlook and find that the text has crashed to Times New Roman. The screenshot looks like a nightmare: a jarring, generic font that completely disrupts the email's layout and aesthetic. The error message might not be as obvious, but it's usually lurking in the email's source code, buried in a sea of HTML and CSS. For example, the email client might be complaining about a "font family not found" or "CSS not applied" error. This symptom is all too common, and it's usually caused by a single, insidious issue: Outlook's inability to render custom fonts imported from Google Fonts.

The problem lies in the way Outlook's rendering engine, specifically Internet Explorer's Trident engine, handles CSS imports. When Outlook loads the email's CSS file, it scans the `<link>` tags for custom font imports like Google Fonts. However, when it finds these imports, it doesn't apply them correctly, resulting in a cascade of errors that ultimately crash the custom font family to Times New Roman. This is because Outlook uses a proprietary stylesheet called Microsoft Office Styles (MSO) to override the email's CSS, effectively bypassing the custom font imports.

Here's what happens behind the scenes:

To make matters worse, Outlook's rendering engine is notoriously finicky when it comes to CSS imports. It only supports a limited set of CSS properties and values, which can lead to a lot of frustration when trying to troubleshoot these issues.

So, how can we fix this issue and ensure that our custom font family renders correctly in Outlook? The solution lies in using MSO conditional CSS overrides, which allow us to specify a fallback font family that Outlook will use when the custom font is unavailable. We can achieve this using the following code snippet: ```html <!--[if mso]> <style type="text/css"> @font-face { font-family: 'Open Sans'; src: url('https://fonts.googleapis.com/css?family=Open+Sans') format('truetype'); } body { font-family: 'Open Sans', Arial, sans-serif; } <![endif]--> ``` By using the `<!--[if mso]>` conditional comment, we're telling Outlook to apply the following CSS rules only when the email is being rendered in Microsoft Office. The `@font-face` rule specifies the custom font family, while the `body` rule sets the font family to the custom font, with Arial as a fallback.

However, if we want to ensure that our font stack is consistent across all email clients, we need to use a more robust approach. That's where our [Font Stack Builder](https://renderops.tech/tools/font-builder) comes in – a powerful tool that allows us to build email-safe font chains with MSO conditional fallbacks and Outlook-tested stacks.

While the fix above works for most cases, there are a few edge cases that require tweaks to the solution:

In conclusion, fixing custom font fallbacks crashing to Times New Roman in Outlook requires a deep understanding of MSO conditional CSS overrides and the nuances of email client rendering engines. While it can be frustrating to troubleshoot these issues, using the right tools and techniques can help us achieve cross-client consistency and ensure that our custom font family renders correctly in all email clients. By using the [Font Stack Builder](https://renderops.tech/tools/font-builder) and Prism, our parallel device simulator that renders your email across 14 clients simultaneously in-browser, we can ensure that our email campaigns look great on every device.