Outlook Font Stack

Web Fonts and the Use of Font Stacks in Email Design

12

So you’ve written amazing copy for your next email marketing campaign. But your email still looks a bit boring.

How about some fun fonts to jazz up that email? In this article, we’ll talk about web fonts and how to use them in your HTML email designs.

What are web fonts?

Web fonts are fonts pulled from a server hosted by you or by a web font service, such as Google (Google Fonts). This gives you access to a much wider variety of fonts than the few that come pre-installed on all devices. Think of the design possibilities this opens! 

However, as we’ll discuss below, not all web fonts are supported by different email clients or web browsers. When that happens, your funky font choice might look funky for a different reason.

Don’t worry, we’ll explain how font stacks in HTML emails help you maintain some control over which fonts email clients display.

What’s the difference between web fonts and web-safe fonts?

Again, there are a number of fonts that come pre-installed on almost every device. These fonts are considered “web-safe,” since they’re pulled from your user’s local directory, and there’s a good chance that web-safe fonts will display.

The only caveat is there’s a shortlist of web-safe fonts, and these fonts can be a bit boring if you’re trying to match your brand’s chosen typeface or make your email design stand out from the crowd. Here’s a list of some web safe fonts:

  • Helvetica
  • Verdana
  • Sans Serif
  • Georgia
  • Times New Roman
  • Arial 
  • American Typewriter

In contrast to web-safe fonts, web fonts are pulled from a server. This means they’re not hosted on your user’s local machine, and there’s a good chance the font isn’t installed in your user’s local directory. In other words, there’s a chance the web font may not display as intended due to differences in web browsers and email clients.

How can web fonts improve my emails?

Even though it takes a few extra steps to use web fonts, they can improve your email campaign design. A few reasons why you’d want to use web fonts instead of web-safe fonts are:

  • You’ll have more creative freedom. Web-safe fonts can be a bit limiting in terms of email design. With web fonts, you’ll have access to a lot more fonts which can add that extra edge to your email campaign.
  • You’ll stand out from the crowd. The inbox is a crowded place. Keep your reader’s attention once they open your emails with strategic use of creative fonts.
  • You’ll develop a strong visual brand identity – without having to use images. Many famous brands use very recognizable fonts. When you see it, it reminds you of the brand, even if it isn’t brand-name. You can use web fonts to consistently develop your own visual brand identity without having to resort to images.

The most common reason for using a specific web font in email marketing is that a brand wants to use a specific font for which they are already recognized. Email developers may be asked to include a certain custom font because it is the one identified for use for headlines and copy in other digital assets.

But then … someone in the company sees an email in Outlook and wonders why you’re using Times New Roman. That’s the problem we’ll address later in this article.

What are some things to consider before using web fonts?

Before we dive into how to get the right fonts to display in your email campaigns, we should consider a few things:

  • Email client support
  • Readability and accessibility
  • Licensing

Let’s dig into each of these in more detail below.

Which email clients support web fonts?

While many email clients support web fonts, not all of them do. In fact, there may be differences between emails opened in web browsers and in email clients. As always, be sure to test your emails to ensure your content displays as intended.

Email clients that do support web fonts include:

  • Apple Mail
  • iOS Mail
  • Android Mail (not Gmail)
  • Thunderbird
  • Outlook for macOS

So, you’ll have the best luck with web fonts if your subscribers are using Apple devices.

Why do I need to be aware of web font readability and accessibility?

Even though web fonts allow you to be creative with font styles and branding, keep in mind that not all fonts are equally readable. That is, some fonts are easier to read than others, like sans serif fonts. Ornate or decorative fonts can make it hard for low-vision readers to distinguish between letter shapes.

Take a look at the Johto font that mimics old video game interfaces:

Pretty cool, right? But maybe save the Johto font for your next video game-inspired app. This might not be as readable in the body copy of your marketing emails.

Keep your fonts accessible to all your readers by using easy-to-read fonts that are widely supported in major email clients.

Do I need to license web fonts?

You’ll need a license to legally use a web font online. Many web font services have End User License Agreements (EULA) covering website and mobile app usage. However, you may have to reach out to individual web font providers to see if they allow their fonts to be used in emails. Some providers see email usage as a way of redistributing the font, which goes against their policies.

Where can I find web fonts?

Ready to get started with web fonts? We’ve put together a list of where you can find web fonts for your next marketing campaign:

  • Google Fonts (free)
  • Adobe Fonts (mostly free)
  • Web font services (paid)

Let’s take a look at each of these in more detail below.

Google Fonts

Google Fonts is a free web font service. You can embed the fonts via an URL or download the web fonts if you’re mocking up designs on your local machine with Adobe Photoshop, Sketch, or another design software. Google Font licenses allow you to use them in your emails. Below, we’ll talk more about how you can embed Google Fonts in your email with the <link> method.

It’s important to mention that, for whatever reason, most Google fonts (and other web fonts) won’t display in Gmail. Seems strange, right? It is what it is, friends.

Adobe Fonts

Adobe Fonts is a paid web font service. However, it is free if you’ve already got a Creative Cloud subscription. Adobe Font licenses cover email usage. We’ll discuss below how you can use both the <link> and the @import methods to use Adobe Fonts in your emails.

Web font services

There are a number of web font services that are available on a paid basis. As we mentioned above, all web fonts require licenses. Check with each provider to make sure you can use their fonts in your emails.

Here’s a list of some paid web font services:

How do I embed web fonts in emails?

Now that we know where to find web fonts, let’s talk about three different ways to embed web fonts in your HTML email template:

  • @import
  • <link>
  • @font-face

We’ll dig into each of these below and why you might want to choose each method. In the following sections, we’ll talk about using web fonts in your emails and how to use a font stack to specify fallback fonts in case your web font doesn’t display in a particular email client. This is important because web fonts only work in a limited number of email clients.

Before we get started, you should be familiar with HTML and CSS concepts. (Check out our email coding refresher if you’re a bit rusty!) In these examples, we’ll use the Roboto font from Google Fonts. However, the process should be similar for all other web fonts.

How can I use the @import method to embed a web font?

The @import method defers the loading of the web font until your email’s HTML is fully loaded. In other words, your email will load first, and then your font will load after. This means your font may take a bit longer to appear. Here’s what email client support loos like for the @import method:

Can I email… @import

To use the @import method, we’ll first obtain the @import code from the web font service. Then, we’ll embed the method in the head of our HTML email template.

We’ll use Google Fonts for this example, but the procedure is similar for other web font services. To use the @import method:

  1. Navigate to your font on Google Fonts.
  2. Next to your font, click +Select this style.
  3. In the sidebar which pops up, click the radio button for @import, as shown below.

  4. Select and copy the code.
  5. Paste this code, including the <style> tags, in the <head> of your HTML template.

How can I use the <link> method to embed a web font?

The <link> method loads your web font inline as your email’s HTML code is read from top to bottom. In other words, your email might take longer to load if your web font file is very large. Here’s a look at email client support for using the <link> HTML element:

To use the <link> method, we’ll first obtain the <link> code from the web font service. Then, we’ll embed the method in the head of our HTML email template.

We’ll use Google Fonts for this example, but the procedure is similar for other web font services. To use the <link> method:

  1. Navigate to your font on Google Fonts.
  2. Next to your font, click +Select this style.
  3. In the sidebar which pops up, click the radio button for <link>, as shown below.

  4. Select and copy the code
  5. Paste this code in the <head> of your HTML template.

How can I use the @font-face method to embed a web font?

The @font-face method is the most bulletproof way to embed fonts, since it imports the web font directly from the source. This method also allows you to specify the format of your web font, like .eot, .woff, .woff2, .svg, and .ttf. The .woff and .woff2 formats have the best support when it comes to email. As you can see, the @font-face approach seems to be the most reliable method among email clients.

But Gmail. Yahoo Mail, AOL, and some version of Outlook are still, shall we say “unsupportive” of web fonts.

Can I email… @font-face

To use the @font-face method, we’ll first obtain the @font-face code from the web font service. Then, we’ll embed the method in the head of our HTML email template.

We’ll use Google Fonts for this example, but the procedure is similar for other web font services. The only difference is that it’s a bit harder to find the @font-face code for Google Fonts. Other web font services may supply you with this code directly. To use the @font-face method:

  1. Navigate to your font on Google Fonts.
  2. Next to your font, click +Select this style.
  3. In the sidebar which pops up, click either radio button. Select the URL, as shown below.

  4. Copy this URL and paste it into the search bar of your web browser. A web page will open, as shown below.

  5. Scroll down and copy the code for /* latin */. For the example above, you’d copy the following code:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1MmgVxIIzIXKMny.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  1. Paste this code in the <head> of your HTML template.

How do I display web fonts in my emails?

Okay, now that you’ve embedded your web font using one of the three methods above, it’s pretty easy to use your web font in your email.

Simply use CSS inline or in your stylesheet to display the web font as you would any other normal font, as shown below:

font-family: 'Roboto';

So that’s it, right? Not quite. In the next section, we’ll talk about font stacks and how they’re crucial to using web fonts.

Why are font stacks important and how do I use them?

Since not all web fonts display properly across all email clients, we highly suggest that you use a font stack. This allows you to specify “back-up” fonts if your web font fails. This means that if your brand wants to use a particular font, you can do so in email clients that support web fonts. At the same time, you also ensure that you’ve specified the next-best options for email clients that do not display your chosen font. This way, you can select fonts with similar typefaces to your chosen font to preserve your visual brand identity.

For instance, here’s a modified version of the code above:

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

First, we call the Roboto web font. If this font doesn’t work, the email client will try to use our fallback, Verdana, a web safe font. Finally, the email client will default to Sans Serif if all other fonts fail. These default fonts are important: choose them wisely so that they don’t disrupt your email design too much in case your primary web font fails.

Now, we’re ready to get cracking with web fonts!

Wrapping up

Web fonts are a great way to jazz up your email marketing campaign and create brand awareness without using images. Check out our best practices for using fonts in emails or learn more about character encoding.

As always, don’t hesitate to reach out. Get started with Email on Acid today!

This article was updated May 5, 2022. It was first published in November of 2013.

Simplify the Email QA Process and Deliver Perfection

What’s the best way to run through your pre-send checklist? With Email on Acid’s Campaign Precheck, we’ve simplified the process and set everything up for you. Use it to double-check your content, optimize for deliverability, ensure accessibility, and preview how campaigns look on the most popular clients and devices. All before you hit send!

Start a Free Trial

Author: The Email on Acid Team

The Email on Acid content team is made up of digital marketers, content creators, and straight-up email geeks.

Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.

Author: The Email on Acid Team

The Email on Acid content team is made up of digital marketers, content creators, and straight-up email geeks.

Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.

12 thoughts on “Web Fonts and the Use of Font Stacks in Email Design”

  1. We’ve tried Google Fonts multiple times in our mailings, but we keep encountering a problem: The mail won’t show the Google font or the fallback fonts when opened in Outlook 2007. Instead, we always get Times New Roman.

    If anyone has found a workaround for this, I’d love to hear it.

  2. *Can* we add Google Fonts? Sure!

    *Should* we add Google Fonts? Unless you’re sure that your target audience is comprised overwhelmingly of Apple device toters, it’s still a big fat sad “Nope”.

    A quick test reveals that more platforms DON’T support Google Fonts than do. Namely:

    : Lotus Notes 8.5
    : Outlook 2002, XP, 2003, 2007, 2010, 2013
    : GMail on Android and iPhone
    : Outlook.com on Android and iPhone
    : Windows Phone 7.5
    : All [repeat: ALL] webmail platforms

    Convincing one’s clients – particularly those with a rightfully protective sense of their company’s/brand’s identity – that an email design will look different on a few email platforms due to non-webfont idiosyncracies is already difficult enough. Getting them to accept that they’re going to see differences across a significant majority of platforms is going to be near impossible.

    Frans: There’s an issue with fonts that have multiple-word names with spaces, e.g. ‘Helvetica Neue’, and Outlook that can cause this stubborn TNR appearance. We discovered that removing the quote marks around the font names solved this [despite it being contrary to W3C recommendation… but hey, this is email; standards should be left at the door anyway]. Having said that, the webfont test I just ran used the single-word Tangerine font, and the issue still occurred, so I’m not sure there is a solution to the 2007/TNR problem 🙁

  3. Hey Frans,

    If you use !important on any inline style rule Outlook 07-13 will skip it. So you can use something like this to get Arial in Outlook and a Google font when supported:

    Some text
  4. I am puzzled by your article, as I’ve avoided using linked stylesheets in emails, for the last 10 years, as they basically didn’t work in many email clients.

    ————

    Here’s what MailChimp say on the subject:

    Use inline CSS.
    Referencing CSS files on your server like this is not very reliable:
    <link href=”http://www.yourdomain.com/style.css” rel=”stylesheet” type=”text/css”>

    ————

    But things change and I’d like more fonts. So please could you clarify your advice, including whether it’s OK for WebMail Clients and when email content is copied-and-pasted for social clients.

  5. Pete,
    The only clients that support web fonts are the ones listed in the article, I know it’s a very short list. I’m not sure what you mean by “social clients,” but copy/paste is a very unreliable way to send an email. Hope that helps!

  6. Thanks! When I said, “copied-and-pasted for social clients”, I had in mind when people receive an email and copy-and-paste content from it into e.g. facebook. I’ve seen this happen several times and even the copied content going viral on rare occasions, so it’s useful if email content is at least somewhat likely to look good when pasted.

  7. Hi All:

    Just for check an other way to develop code:
    Did you try to put css style into body section?
    Since most of the client overwrite head section by it’s own framework, it could be possible to work fine.
    Maeby the line <link rel=”stylesheet” type=”text/css” may not work out of the header.

    Any way, it’s just a suggestion.

    Thanks!

  8. WEB FONTS FROM OTHER FONT SERVERS
    =================================
    A bit off topic. Please pardon.

    This is about a method that potentially impacts a billion people. Join us if you like the idea.
    We are testing orthographic smart-fonts served out of smartfonts.net. The CSS looks like follows:
    (Notice the ‘text-rendering’ and ‘font-feature-settings’ selectors)
    ==========
    @font-face{font-family:singfont;src:url(http://smartfonts.net/woff/samagana.woff) format(“woff”)}
    .sing{font-family:singfont;text-rendering:geometricPrecision;font-feature-settings: “liga” 1;}
    ============
    These fonts are an alternative to double-byte Indic, very difficult to learn and type. We call the method dual-script. The underlying code is from SBCS (Latin-1) native grammar compliant romanized Indic. And the fonts show the complex forms of the native scripts via the ligature feature in OpenFont. The text looks much similar to Icelandic in the absence of the smartfont. Although our test Singhala font above has 2500 ligatures (as opposed to 5 in some English fonts) all recent versions of browsers as well as smart phones show the text of the rough shod design of our font.
    See: http://lovatasinhala.com/

    The frustrating part is that web based clients such as gmail / yahoo mail do not accept the @font CSS selector. The reason probably is because these pages still provide a hard coded list of fonts.

    They can have two additional things:
    1. Allow the email writer select fonts from the system risking the receiver not having them.
    2. Let font servers register their CSS pages with them so that uses can directly select the web fonts.

    Thanks.

    JC

  9. Sooo.. is it *advisable* yet to use web fonts in emails? And is it better to do so via the <link> than the @import? Thx!

Comments are closed.