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 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.

In the Ultimate Guide to Web Fonts, we’ll dig into the details of what web fonts are and how email designers can implement them in their emails.

What is a web font?

There are two different types of fonts available to email designers for their emails—web safe fonts and web fonts. Here’s the difference between the two:

  • Web safe fonts
    Think Arial, Times New Roman, Verdana, or Georgia as prime examples of web safe fonts. They’re the default fonts found across the majority of different operating systems and devices.
  • Web fonts
    Web fonts aren’t found as part of the default fonts available on various devices and operating systems, and are specifically designed and licensed for use on websites. A couple of web fonts you may be familiar with are Open Sans and Roboto.

Why 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 and accessible—and stick to their 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:

  • Apple Mail
  • iOS Mail
  • Google Android
  • Samsung Mail (Android 8.0)
  • Outlook for Mac
  • Outlook App

The supported email client list may look short, but take heart—most of them are among the top 10 most popular email clients. That’s something to be excited about!

*Pro Tip: In April 2018, Gmail released an updated interface for their webmail client. This new interface uses two popular web fonts: Google Sans and Roboto. What does this mean? Despite Gmail not supporting web fonts, if you use either of these web fonts in your emails, they will actually render in Gmail. Simply add the fonts to your font-family CSS attribute if you want to use them in your email.

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 to embed web fonts in email

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

@import

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.

This method is well supported across most of the above email clients, and only lacks support in Android 2.3 (Android Gingerbread)—an old Android version that has a vanishingly small market share.

<link>

<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 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.

@font-face

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 to find 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, using the font-family name defined in the import method:

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

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

Each email client has a default font if the font listed in the font-family stack is unavailable. For example, Gmail uses Arial, Apple Mail uses Helvetica, and Outlook uses Calibri.

If you don’t like the sound of any of these default fonts, we’ve got some good news—you can choose your fallback font in the font-family stack.

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

Think of this as a prioritized list of preferred fonts. If a client can’t comply with your number one choice, it will fall back to the next one on your list.

For example, using the above font-family stack, Gmail will ignore the first font in the list as it’s a web font that’s not supported in Gmail, and the font rendered in the email 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.

How to choose the right 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 prevent your email design from falling apart when the fallback font is in use.

Here’s an example of the subtle differences in x-height between the fonts Verdana, Arial, and web font Proxima Nova. These subtle differences can make all the difference in making or breaking your email design when web fonts aren’t rendering.

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

Avoiding Faux Bold / Faux Italic

If you have accompanying bold and italic versions of your web font files, then let’s use them!  Typeface designers have put a lot of thought and effort into getting all the different styles of a font just right, so it’s best practice to apply the original type design rather than allowing the email client or browser to haphazardly apply a faux bold or faux italic to the regular font.

Basically, do NOT do this:


@font-face {
font-family: 'Montserrat';
src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
}

style="font-family: 'Montserrat', Verdana, sans-serif; font-weight: bold; font-style: italic;"

Like web design, you can pull in the genuine fonts by including these styles in your @font-face stack, like so:

@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: normal;
src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
}
@font-face {
font-family: 'Montserrat';
font-style: italic;
font-weight: normal;
src: local('Montserrat-Italic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUQjIg1_i6t8kCHKm459WxRyS7m0dR9pA.woff2) format('woff2');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: bold;
src: local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3gnD_vx3rCs.woff2) format('woff2');
}
@font-face {
font-family: 'Montserrat';
font-style: italic;
font-weight: bold;
src: local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');
}

As you can see, the different styles pull in different fonts regardless of the font-family. This way, if you style your font in the HTML like this:

style="font-family: 'Montserrat', Verdana, sans-serif; font-weight: bold; font-style: italic;"

…then it will pull in the genuine ‘Montserrat-BoldItalic’ font! Likewise, just adding font-weight: bold; will pull in ‘Montserrat-Bold’ and just adding font-style: italic;  will pull in ‘Montserrat-Italic’.

So, you might be wondering—why do it this way instead of declaring a different font-family for each style, which also pulls in the genuine fonts? This is how that looks:

Do NOT do this, either!

@font-face {
font-family: 'Montserrat Bold Italic';
src: local('Montserrat Bold Italic'), local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');
}

style="font-family: 'Montserrat Bold Italic', Verdana, sans-serif;"

This presents a problem. Using font-family names to store styles not only creates overly-complicated and redundant CSS, but it also strips your text of styling if your fallbacks kick in. So for example—if you’re viewing the above code in Gmail (which doesn’t support custom web fonts), then you will only be seeing un-bolded, un-italicized Verdana instead of Montserrat Bold ItalicBy keeping your font-family and your font-weights/font-styles separate, your fallback fonts will still retain the correct styling.

Outlook, what are you doing to me!

With Times New Roman as the default fallback font, Outlook has traditionally been a challenge for email marketers with a heart for typography. While Outlook 2019—that’s Microsoft’s most recent version of its desktop email client—honors fallback fonts specified in the code, older Outlook versions are still a challenge.

If you’re using the @font-face import method, Outlook 2007/10/13/16 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 “Montserrat” in your font-family stack and read the next font.

There is also the method of targeting the Microsoft Office-specific property, mso-font-alt, with your chosen system-font to your @font-face declaration block.

@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: normal;
src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
mso-font-alt: 'Arial';
}

This will tell Outlook for MS Office to default to your assigned fallback font.

Where to find web fonts

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:

Licensing web fonts in email

Web fonts were originally designed to be used solely on websites, so their licensing is typically for use only on websites and mobile applications. The reason many web font services don’t allow use in email is because it’s seen as distributing the font, which goes against many of the services’ End User License Agreement (EULA).

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 opens, which should be considered when using a paid web font service.

Can I use web fonts?

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!

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.

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

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 that 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 90+ email clients, including desktop, webmail, and mobile devices.

Learn more →