EngageOne™

Web Fonts in Emails

Intro
Using web fonts in HTML is something we have all become accustomed to in everyday development. The HTML 5 specification allows us to import any font we want in a variety of different formats to support all mainstream browsers.

This is fantastic when using a particular font is required to stay on brand or for implementing that standout design from your creative team.

Now cast your mind over to the email realm. Here you will find fragmented support for web standards in a space with vastly more clients than there are web browsers all rendering your beautiful HTML email differently.

The Email Problem
Web fonts in email seems like a sound idea, drop in your @font-face rules and start using your new "insert awesome font name here" font just like any other. Preview your email in the browser maybe even sent a test to your phone and all looks great.

Now imagine you sent this for approval and get the feedback "Why is all the text in Time New Roman?".

Ah! You find out, like about 10% of all user's, the approver is using Outlook. What to do?

You do some research and find out that web font support in email clients is not great, even Gmail does not support this.

The bottom line is using web fonts in an email is going to be difficult. Currently only a few clients support this and those that don't exhibit different behaviours when they encounter a web font. Specifically Outlook ignores fallbacks and defaults to Time New Roman even if you ask for a web safe alternative.

If all your user's have an Apple device then your golden read on no more you can use all the web fonts you like. Otherwise read on for some general guidelines to follow.

The Solution
First off this solution is not going to make your web fonts display in Outlook, but it will allow you to set a better fallback option that works across clients when a web font is not supported. No more Time New Roman (unless thats what you want).

Standard (Web Safe) Fonts
To understand how to set our fallback we must first know what fonts we can safely use anywhere. These standard or web safe fonts are considered safe to use for the web/email as they are installed on all major operating systems.

• Arial
• Courier New
• Georgia
• Times New Roman
• Verdana
• serif
• sans-serif

Importing Web Fonts
The way we import our web font is critical to preventing Outlook displaying everything in Time New Roman. The key is to include a @font-face rule in a way Outlook will ignore. Fortunately there are lots of things Outlook does ignore so simply wrapping our @font-face rule in a media query does the trick.

@media screen {
    @font-face {
        font-family: 'Chilanka';
        font-style: normal;
        font-weight: 400;
        src: local('Chilanka Regular'), local('Chilanka-Regular'), url(https://fonts.gstatic.com/s/chilanka/v5/WWXRlj2DZQiMJYaYRoJXKdAiZQTP.woff2) format('woff2');
    }
}

**This goes in a style tag in the head of your HTML file.

Specifying Fonts
Finally to make use of the web font and to specify the fallbacks we use an inline css style on the element in our HTML we want to use the font. Inline styles are the safest solution for email HTML as some clients will not render styles set using classes.

<h2 style="font-family: Chilanka, Helvetica, Arial, sans-serif; font-size: 28px; color: #444444;">Amazing Title</h2>​

In this example we specify the font-family as "Chilanka, Helvetica, Arial, sans-serif" this means out web font (Chilanka) will get used if available, otherwise the client will try Helvetica, Arial, and finally fallback to a generic sans-serif is no other fonts were available.

Results 
Outlook 2016 (Windows 10)                                                                          Mac Mail 11 (Mac OS)



------------------------------
Robert Curran
Principal Software Engineer
EngageOne Communicate
------------------------------