by Sophie Daniline 
Outlook eh. *Email Marketers scream everywhere*. If you’ve ever tried to build an email, got it looking perfect, and then run it through Outlook rendering, you’ll understand the frustration. Line heights ignored, buttons look strange, background images lost – the issues are endless. Luckily we have fixes for most of these! The one I’m going to focus on today is how Outlook renders fonts.
What’s the issue?
Outlook doesn’t recognise any fonts other than web-safe fonts.
This means, if you try and import Google fonts, or use your own hosted brand fonts, Outlook will ignore all of them.
If you use the Litmus render test built into Pardot, you’ll see your fonts come up like this:
How can we fix Outlook fonts?
The easiest way to fix the issues is to put a piece of code right after the <body> tag of your email.
Here’s an example of what that code can look like:
<!–[if mso]>
<style type=”text/css”> body, table, td, tr, p, a, h1, h2, h3, {font-family: Arial, Helvetica, sans-serif !important;} </style>
<![endif]–>
Let’s break down what this code does.
Code |
Purpose |
| <!–[if mso]> | This is the code that tells our email what to do if it reaches a Microsoft Office inbox. |
| <style type=”text/css”> | This is the style tag, telling our email to start looking for styles. |
| body, table, td, tr, p… | These are all attributes within our HTML. We might have CSS styling related to each of these attributes. For example, we will want our <p> (paragraph) text to be styled differently to our <h1> (heading 1) text. When setting fonts, we need to tell our email to apply the font styling to any font-based attributes. If you don’t use as many header tags as this example email does, then you don’t need to include all the attributes I’ve included here. |
| {font-family: Arial, Helvetica, sans-serif !important;} | This is where we tell our email what font style to apply if it reaches a Microsoft Office inbox. You’ll see we’ve asked it to display Arial, and then have two fallback fonts as well. There shouldn’t be a problem with Outlook displaying Arial, but this is a fail-safe. |
| </style> | This tells our email that the style section is over. |
| <![endif]–> | This is the final piece, telling our email what to do with Microsoft Office inboxes. |
Once you’ve added this code in, your email should look more like this:
What next?
Easy. Now off you go, and fix your fonts!
If you’ve got your head in your hands and just want someone to do it for you, get in touch! We live for fixing Outlook problems!