Email Development September 7, 2016 • Kyle Lapaglia

Making Custom Font Stacks Work in Outlook: Update

If you include a custom font at the top of your font stack, Outlook will ignore all of your fallback fonts and instead display Times New Roman. But fear not! As with most Outlook bugs, there are ways to get around this. We covered this topic in 2015, and the blog was hugely popular. We offered one technique to help create working custom font stacks, but our readers had a lot of other ideas! In this blog we’ll repeat our last technique, as well as a few of submitted by our readers. We tested all of these techniques to make sure that they work, but they may or may not work for you depending on how your email is coded and how your ESP modifies your code upon sending. Hopefully, at least one will do the job!

Google Fonts in Email

Google Fonts are the most commonly used custom fonts, because they don’t require that the recipient have the font installed on their computer. To add Google fonts to your email, you can use either of the following methods. Both have the same level of support. Check out our blog on Google fonts for more info. You could also host your own font, and should get similar results.

<link>

You can add a link to the font to the head section of your email.

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div style="font-family: 'Tangerine', serif;font-size: 48px;">Making Email Beautiful!</div>
  </body>
</html>

@import

You can also use the @import statement in your embedded CSS in the head of the email.

<html>
  <head>
    
    <style>
    @import url(https://fonts.googleapis.com/css?family=Tangerine);
    
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div style="font-family: 'Tangerine', serif;font-size: 48px;">Making Email Beautiful!</div>
  </body>
</html>

Supported Clients

Google fonts should work in Apple Mail, Lotus Notes 8, Outlook 2011, Outlook 2016 for Mac, Thunderbird, Android 4.4 (and some other versions) and the iOS Mail App. Google fonts don’t work in Gmail or any of the other web clients.

Fix 1: Replace the Stack Using Attribute Selectors

This is our favorite of the options that were offered by our readers. Write your font stack, just as you normally would, but put your custom font last in the list. Then include the following code in your CSS: “[style*="CustomFont"] { font-family: 'CustomFont', Helvetica, serif !important; }” This code will tell the email client to replace any style that includes the custom font with the correct stack. Attribute selectors don’t work in Outlook, so it will be ignored. Thanks for showing us this one, Eoin!

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      div {font-family: Helvetica, sans-serif, 'Tangerine';}
      
      [style*="Tangerine"] { font-family: 'Tangerine', Helvetica, serif !important; }
    </style>
  </head>
  <body>
    <div style="font-family: Helvetica, sans-serif, 'Tangerine';font-size: 48px;">Making Email Beautiful!</div>
    <div style="font-family: Helvetica, serif;font-size: 48px;">Helvetica</div>
    <div style="font-family: 'Times New Roman', serif;font-size: 48px;">Times New Roman</div>
  </body>
</html>

Fix 2: Wrap Text in a Span

This is the technique from our previous blog. It works well across the board, but requires a lot of additional code to work properly because every text section has to be wrapped in a span.

<html>
  <head>
    <link href="http://fonts.googleapis.com/css?family=Indie+Flower" rel='stylesheet' type='text/css'>
    <style type="text/css">
    </style>
  </head>
  <body>
 <table>
  <tr>
    <td style="font-family: Helvetica, Arial, sans-serif; font-size: 20px;">
      This will always be Helvetica.
    </td>
  </tr>
</table>

<table>
  <tr>
    <td style="font-family: 'Indie Flower', Helvetica, Arial, sans-serif; font-size: 20px;">
      Outlook will display Times New Roman. Others will display Helvetica or Indie Flower.
    </td>
  </tr>
</table>

<table>
  <tr>
    <td style="font-family: Helvetica, Arial, sans-serif; font-size: 20px;">
      <span style="font-family: 'Indie Flower', Helvetica, Arial, sans-serif !important;">
        Outlook will display Helvetica, others will display Indie Flower.
      </span>
    </td>
  </tr>
</table>
  </body>
</html>

Fix 3: Add MSO Conditional Code

On the flip side, you can specify a custom font stack in your embedded CSS, and then use a MSO conditional statement to override the font stack with generic fonts for Outlook only. This option is also fairly light on code, though you may have to specify a lot of places where you want the override. This trick is courtesy of Khoudj, Thomas Grimes and Stijn van der Ree.

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      div {font-family: 'Tangerine', Helvetica, sans-serif;}
    </style>
    <!--[if gte mso 9]>
    <style type="text/css">
      div{font-family: Helvetica, serif !important;}
    </style>
    <![endif]-->
  </head>
  <body>
    <div style="font-size: 48px;">Making Email Beautiful!</div>
    <div style="font-family: Helvetica, serif;font-size: 48px;">Helvetica</div>
    <div style="font-family: 'Times New Roman', serif;font-size: 48px;">Times New Roman</div>
  </body>
</html>

Fix 4: Specify a Custom Font in a Media Query

Another approach is to write a standard font stack with no custom fonts in it in your embedded styles. Then, below this section, in an “@media screen” query, add your custom font stack. Because Outlook can’t read media queries, it won’t see this custom font stack and it will render normally. Thanks for letting us know about this technique, Ahmad! However, this technique can be a little dangerous. Outlook caches fonts, so if that user has received an email using that font before, it may still trigger the Times New Roman bug.

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
      div {font-family: Helvetica, serif;}

      @media screen{
        .variable {font-family: 'Tangerine', Helvetica, sans-serif;}
        }
    </style>
  </head>
  <body>
    <div class="variable" style="font-size: 48px;">Making Email Beautiful!</div>
    <div style="font-family: Helvetica, serif;font-size: 48px;">Helvetica</div>
    <div style="font-family: 'Times New Roman', serif;font-size: 48px;">Times New Roman</div>
  </body>
</html>

Did we miss any?

If we missed your favorite trick to defeat this bug, let us know in the comments below!

Outlook got you down?

Outlook can be the bane of an email dev's existence, but once you get to know its bugs it's not so bad. Is this Stockholm syndrome? In any case, we have lots of great resources!