The Ultimate Guide to Web Fonts

[ 0 By

Historically, choosing the right font for your email has never been too hard, considering the limited number of web safe fonts to choose from. But recently, things have changed. More and more email designers are pushing the boundaries and embracing the same development techniques that web designers have been using for years—implementing web fonts in their emails.

Web fonts allow web designers to be more creative with their typography, enabling them to choose non-standard fonts in their designs.

As is usually the case with breaking new ground in email design and development, forward-thinking members in the community were among the first to bring these techniques to our inboxes (and attention). We owe a huge thanks to Campaign Monitor’s fantastic guide to web fonts, Paul Airy’s “A Type of Email”, and Style Campaign for their inspiration.

So, what is a web font?

Web fonts are specifically designed and licensed for use on websites and mobile apps. A couple of web fonts you might be familiar with are Open Sans and Roboto. They have to be downloaded, and often purchased, from a web font supplier for use on your own computer.

Email designers commonly use what are called web safe fonts in their emails. Unlike web fonts, web safe fonts are the default fonts found across the majority of different operating systems and devices. A few you might be familiar with are Arial, Times New Roman, Georgia, and Verdana.

Should I use web fonts?

As a marketer and designer, you know the pressure to stay on-brand in email, with colors, design, and—yes—typography. Locking important copy in images has been a standard practice in email design as a way of staying on brand and being creative. But “hiding” text in images limits the accessibility of the email because screen readers can’t read the text on the image.

Web fonts open up new avenues of creativity in typography, allowing email designers to be creative, accessible, and stick to your brand’s look and feel.

Email and Web Fonts

While web fonts don’t have universal support, here are the email clients where they are supported:

  • AOL Mail
  • Native Android mail app (not Gmail app)
  • Apple Mail
  • iOS Mail
  • Outlook 2000
  • Outlook.com app

The supported email client list may look short, but take heart—all but one (Outlook 2000) are in the top 10 most popular email clients. That’s something to be excited about!

Discover your top 10

When it comes to email marketing, it’s all about your audience. Use Litmus Email Analytics to discover which email clients are most popular with your subscribers. Sign up free!

Discover your audience →

 

How do I use web fonts in my emails?

There are three main approaches you can take when using web fonts into your emails.

Using the @import method

Using @import is one of the simpler approaches for importing web fonts in email. Place the following line of code in the <head> of your email, usually at the top of your <style>.

@import url('https://fonts.googleapis.com/css?family=Montserrat');

In this example, the name of the imported font-family is “Montserrat.”

Your web font service will give you the url you need. If you’re hosting the font yourself, you’ll need to point the url to where your web font file is sitting.

Using the <link> method

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">

Just like the @import method, your web font service will define the href value. If you’re hosting the font file yourself, change this URL to point to where the web font sits on your server. And you’ll want to place this line of code in the <head> of your email, near the top.

The <link> method performs slightly better than the @import method, with support from all of the above email clients (hurrah!).

So why would you choose one method over another? The @import method defers the loading of the web font that’s being imported until the HTML it’s embedded in, is itself fully loaded. This can lead to your web font taking a little longer to appear in your email, while the rest of the email is loaded. Conversely, the <link> method loads the resource inline as the HTML file’s code is read (from top to bottom), which could delay the loading of your email if your web font file is particularly large.

Using the @font-face method

Online web font services commonly offer five file formats to choose from: .eot, .woff, .woff2, .svg, and .ttf. The .woff format has the best support when it comes to email, so we suggest using this format when you can. The @font-face method is the only method that allows you to specifically choose what file format you’d like to import, making it the most bulletproof method for implementing web fonts.

Here’s a typical @font-face declaration for importing a web font into email using Google Fonts as our chosen web font service:

@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');
}

Unfortunately, if you’re using Google Fonts, it’s not easy finding the url of a web font—there are a few hoops you have to jump through.

1. Search for the web font you would like to use.
Once you’ve found and selected it, a small black bar will appear at the bottom of the screen. When you click on it, you’ll see a screen just like this:

Web fonts in Google

2. Copy the web font url (highlighted above), and paste it in the address bar of either Safari or Internet Explorer.
We’re using Safari or Internet Explorer in this method as Google Fonts uses browser detection to decide which font file type is served. For this method we want to use the .woff file type. Using Google Chrome the .woff2 font file type that will be served in the browser which has limited support. Thanks to Elliot Ross for this extra insight!

Once the page has loaded, you’ll see a CSS declaration on the page:

Web font CSS

3. Copy this CSS and paste it into the <style> section of your email.

While this method is considered the most bulletproof, changes could be made by the web font service supplier to the direct access url used to import the web font. If you choose to use this method, test your email regularly to ensure your web fonts continue to render over time.

At Litmus, the @font-face method is our go-to implementation of importing web fonts into our emails.

All credit for this method of importing web fonts goes to email accessibility advocate Paul Airy, as detailed in a past Type: E newsletter (which you should definitely subscribe to, if you aren’t already).

Using web fonts in email

Once your web font is imported, using it in email is as easy as using a web safe font:

font-family: 'Montserrat', sans-serif;

Using the font-family name defined in the embed method.

Choosing a fallback font

When using web fonts, it’s a necessity to have a fallback web safe font in place for those email clients that don’t support web fonts.

Default web safe fonts

Using the below font-family stack, any email client that doesn’t support web fonts will ignore the first font in the list, and the font rendered will be Verdana. If Verdana isn’t supported on the device used (which would be very rare, as Verdana is a web safe font), the device would use the default sans-serif font for its system, as this is the third font in the list.

font-family: 'Montserrat', Verdana, sans-serif;

How to choose a fallback font

Choosing the right fallback font that retains your email’s design is key to serving up a great experience for all your subscribers, no matter which email client they’re using.

Fallback fonts should be the same type as the web font—use a sans-serif fallback font if your web font is a sans-serif font, and a serif fallback font if your web font is also a serif font. Using the same style of font will help retain your email’s design in different email clients. You can take one step further by analyzing the x-height of the fonts.

The x-height is the vertical height of the font. Ideally, you should choose a fallback font that has a similar x-height to avoid your email design falling apart when the fallback font is in use.

CSS Font Stack has a complete list—including operating system coverage—of web safe fonts that can be used as fallback fonts.

Web font support in Outlook

You saw this coming: If you’re using the @font-face import method, Outlook 2007/10/13 will default to Times New Roman no matter which fallback font you have in place. The good news is that there’s a well-tested hack that solves this issue.

The following CSS is targeting Outlook, as denoted by <!–[if mso]> and <![endif]–>, and telling Outlook to use a different font-stack.

<!--[if mso]>
<style type=”text/css”>
.fallback-font {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->

Use the class “fallback-font” in your email wherever you define your font-family:

<td class=”fallback-font” style="font-family: 'Montserrat', Arial, sans-serif;”>Your text here</td>

And your fonts in Outlook 2007/10/13 will fallback gracefully to Arial, rather than Times New Roman.

Another solution for this bug is to wrap the @font-face import code in a media query, hiding it from Outlook:

@media screen { 
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');
}
}

Outlook will now simply ignore “Monsterrat” in your font-family stack, and read the next font.

Find web fonts for use in email

Google Fonts

There are loads of web font services available, but Google Fonts is our favorite. The service is totally free, and you can download the web fonts to your computer if you’re mocking up designs in Adobe Photoshop, Sketch, or another design software.

Typekit by Adobe

Adobe’s popular font subscription service has been of little use to email designers in the past, as Typekit relied on JavaScript to embed fonts. As of August 2017, Typekit enabled the use of web fonts using only CSS—no JavaScript required—and that opens up web fonts found in Typekit for use in email. You can find detailed instructions for how to add Typekit web fonts to your emails using @import in the Typekit help documentation.

More Web Font Services

If you’re looking for even more websites that offer web fonts licensed for use in email (mostly on a paid basis), check out some of the services below:

The web font suppliers in the above list include licenses of web font use in email. However, many licenses are charged on the number of monthly email opens, which should be considered when using a paid web font service.

Web fonts done right

To give you a little inspiration into what’s possible, here are a few of our favorite emails featuring web fonts.

Web fonts - Type E
View full email
Web fonts - The Outnet
View full email
Web fonts - Uber
View full email

As you can see there is absolutely no harm in using web fonts as a progressive enhancement in your emails right now. Implement your fallback fonts correctly and push your email into the future!

Before you do that, it is worth taking a look at your subscriber base to see how many are viewing your emails in an email client that supports web fonts. If the majority aren’t, it simply wouldn’t be worth your time and effort, especially if you’re considering using a paid web font.

Don’t forget to test

As the use of web fonts in email is still considered slightly experimental, we recommend you test often, especially if you’ve deployed web fonts in templates which may not get updated regularly. Changes and updates to email clients’ rendering capabilities aren’t usually announced beforehand and can happen sporadically, so it’s best to test on a regular basis.

It’s worth noting that if you have the web font installed on your own computer, you’ll be able to see the web font when testing live in an email client on your computer. Something to bear in mind in case it suddenly looks like Gmail is now supporting web fonts.

TEST TYPOGRAPHY IN YOUR CAMPAIGNS

Inspired to take your type game to the next level? Just be sure to test your campaigns before sending them out. Try Litmus free and make sure your typography looks amazing in 70+ email clients, including desktop, webmail, and mobile devices.

Try Litmus free →