The Truth about Fonts in Email Marketing

The Truth about Fonts in Email Marketing

It’s been more than 40 years since the first email message was sent, and the look and feel of an email have come a long way since then. These days, design and fonts play a critical role in getting your email marketing message front and center with your subscribers. And fonts, in particular, are a tricky beast to personalize to your brands.

Fonts are an essential way to reflect your brand personality. Yet, in the digital space, specialized fonts require that recipients of your message “own” the same font on their device. But with the advent of “web fonts” and “web-safe” fonts, that’s not the case anymore.

Web Fonts vs. Web-Safe Fonts – What’s the Difference?

Like, you are using web-safe fonts in your emails (particularly your personal emails). Fonts like Arial, Verdana, Georgia, Times New Roman, and Courier are deemed “web-safe” or “email-safe” because they are installed by default on just about every computer, device, and operating system there is.

Web-Safe fonts should not be confused with Web fonts. Web fonts are not installed on every operating system and device. That said, oftentimes, you’ll find Web fonts are embedded into web browsers and downloaded into a user’s browser through rendering and applied to text.

The advantage of web fonts is the increased flexibility and versatility to make your text more attractive and provide more of a brand experience.

Where Can I Find Web Fonts?

Google Fonts is one of the easiest sources to find web fonts. You’re able to download the fonts for free and use them how you like—in Adobe Photoshop, Sketch, etc.

You can also choose from web fonts from paid services like the following:

MyFonts
Commercial
FontSpring
Typotheque
Process Type Foundry
Production Type
YouWorkForThem
Village
FontShop

You can also use a proprietary font by hosting it on an online hosting platform and linking to it. However, often when including a custom web font, you’ll need to license it. Generally, the costs for licensing web fonts depend on the number of monthly opens.

Adding Web Fonts to Your Email

An important note: Downloading a web font to your computer does not mean it will render properly in your subscribers’ inboxes. You’ll need to add the web font into the code of your email in some form.

There are three primary methods to do so:

1. Use @import

@import may be the easiest method to import web fonts into your email. Just add the below-mentioned code within the head tag of your email, preferably at the top of <style>.

@import url(‘https://fonts.googleapis.com/css?family=<fontname>’); If using Google fonts

Or

@import url(‘custom url where  the font is hosted’);

You can get the URL from your web font service. For companies hosting the font themselves, the link has to be directed to the address of web font file.

2. Use <link> tag

Similar to @import method, the href value is either determined by the web font service or the address of the hosted server of the font.

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

  • <link> tag versus @import

There are two things to consider when choosing between the <link> method and the @import method: Support and Load Time.

The <link> method is supported by AOL Mail, Native Android mail App (not Gmail app), Apple Mail, iOS Mail, Outlook 2000 and Outlook.com App.

The @import method delays the loading of the web font that’s being imported until the HTML in which it’s embedded gets fully loaded. The <link> method loads the resource inline. If your web font file is particularly large, the @import method may be a better bet given that the email gets loaded even if the web font is “on its way.” If the web font is smaller, then the <link> method may be sufficient.

3. @font-face Method

Five file formats are mainly available in the online web font services.

  1. .eot
  2. .woff
  3. .woff2
  4. .svg
  5. .ttf

Emails work the best with .woff format. Using the @font-face method enables you to choose the file format you wish to import.

@font-face{
font-family:'Gill Sans MT';
font-style:normal;
font-weight:400;
src:local('Gill Sans MT-Regular'), url(link) format('woff');
}

Example of Web Fonts in Email

Fortnum & Mason uses at least one web font in their email text:

 

Fortnum & Mason
Courtesy: Really Good Emails

 

Email Web Font Compatibility

Web fonts are compatible in the following email clients:

  1. AOL Mail
  2. Native Android mail App (not Gmail app)
  3. Apple Mail
  4. iOS Mail
  5. Outlook 2000
  6. Outlook.com App

While Outlook 2000 and AOL Mail may not be a big portion of your list, the other 4 email clients are among the top 10 in terms of use according to Litmus.

As you can see, many email clients (and notably some of the bigger one, like Gmail) don’t support web fonts. This is why it’s important to provide a fallback or “default” font for your subscribers who won’t get to enjoy the unique experience.

Choosing the Right Fallback Font

Your fallback font should match as closely as possible to your email design and the web font you chose. For example: If your web font is a serif font, your fallback font should also be a serif font.

To be safe, you should also choose a fallback font that has roughly the same vertical height (or x-height) of your chosen web font. This way, your overall design doesn’t suffer too much from lack of web font support.

To get a clearer idea on web fonts and their fallback fonts, check out CSS Font Stack.

Outlook Issue with Web Fonts

To put it kindly, Outlook is the one email client that does everything… “differently.”

Outlook won’t fallback to a font you choose out of the box. Instead, it will fall back to Times New Roman.

There is a workaround for this problem.

You only need to embed the code given below.

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

Use the class fallback-text if you have your web font family as below:

<td class=”fallback-text” style=”font-family: ‘Open Sans’, Arial, sans-serif;”>Open sans font for all!</td>

Remember to TEST

As with everything we recommend when it comes to your email marketing, test your web fonts and fallback fonts. Every email client renders web fonts differently—so test to ensure your creativity doesn’t go unnoticed.

Are Web Fonts Worth It?

Look at your mailing list and see how many subscribers view your emails in an email client supporting web fonts. For example, if your subscriber list is heavy on iPhone use, then using web fonts may be worth the effort. If a predominant portion of your list is on Gmail (which doesn’t support web fonts), then perhaps it isn’t worth the effort.

An Alternative to Web Fonts in Email

Is there a font you REALLY want to use? Put it in an image and provide suitable alt tags and inline styling to format it. Remember this: Make sure you maintain the 80/20 text-to-image ratio while doing so. Images-only emails can create their own issues.

Closing Thoughts

If you find it’s worth exploring, using unique web fonts in emails can be innovative and a great way for your messages to stand out from the crowd. If you need help moving forward with web fonts in your email marketing campaigns, InboxArmy would be more than happy to assist you.

Check our email portfolio HERE.

Sharing is caring!

1 Comments

Leave a Comment

Your email address will not be published. Required fields are marked *

  • Scott Cohen

    Scott has been living and breathing email marketing since 2007. With both agency and client-side end-user experience, Scott brings a unique perspective to email marketing that combines best practices with real-world-tested strategy and tactics.