Home » Featured Content » All you need to know about using web fonts in email marketing

All you need to know about using web fonts in email marketing

Email marketing has become a very competitive industry. With many businesses seeing the value it has, everyone has embraced it as one of their primary marketing channels.

It’s for that very reason that you need to create emails that stand out from the 122 emails your customer receives every day. One way you can do that is by using a web font in email typography to create unique emails.

What are web fonts, you ask?

Understanding web fonts

Web fonts allow you to create unique emails by using more creative typography. In short, these are non-standard fonts. As an email marketer, you have two types of non-standard fonts you can use to beautify your emails. These are web fonts and web-safe fonts. Although they may sound the same, they are totally different.

Web fonts

Web fonts are found as default fonts on particular devices and operating systems. They are designed to be used on websites, hence their name. Web fonts are not as common as their counterparts—web-safe fonts.

Source: Really Good Emails

Web-safe fonts

Web-safe fonts are found on most operating systems and devices. Examples include:

Arial
Verdana
Georgia
Times New Roman
Courier

Web-safe fonts are common to most devices and are typically used for live emails.

So, why should you bother using web fonts instead of web-safe fonts?

The case for web font in email

As said earlier, the battle for attention in your customers’ inboxes is really fierce. To win, you have to offer your readers a unique experience. One way to do that is to use web fonts, after all, they are unique.

Another great reason to use web-fonts is that they help you create and portray a brand’s online personality. Here’s a great example from Net-A-Porter.

Source: Really Good Emails

As a brand that caters for sophisticated shoppers, their web font of choice definitely portrays their brand voice and personality well.

Web fonts can be used for many things from enhancing the aesthetic beauty of an email to setting the mood for your message. After all, communication is not just about the message, but it also involves how the message is conveyed. And for written media like email, looks (yes, including typography) enhance your message.

Do all email clients display web fonts?

This is where it becomes a bit tricky. Not all email clients support web fonts, making it a bit of a gamble using them. However, the top 10 popular email clients do use support web fonts, like:

iOS Mail
Apple Mail
Android (default mail client, not Gmail app)
Outlook 2000
Outlook App
Samsung Mail

While Gmail does not support web fonts, it introduced a new interface in 2018 that supports two web fonts, namely Google Sans and Roboto. This means if you use these, they will actually render well for your customers who use Gmail.

If web fonts are not universally supported should you give up on them?

Definitely not!

Let’s see how you can ensure that your email still renders correctly even if your recipient’s email client doesn’t support web fonts.

Fallback fonts – when web fonts don’t display

So, what happens when a customer uses an email client that doesn’t support web fonts?

Simple. Set fallback fonts.

A fallback font is simply a web-safe font you use as a backup in case your web font is not compatible with your readers’ email client. Every email client has its own preferred default font. For example, Gmail uses Arial while Outlook prefers Calibri. If you don’t fancy using these, don’t worry as you can choose any fallback font you’d rather use in the font-family stack.

What happens if an email client doesn’t support your fallback font?

While that doesn’t happen often, if it does your email client will display the next fallback font in line.

Tips on choosing the right fallback font

Choosing a fallback font for your email is not as straightforward as it sounds. Remember, careful thought was taken into the design of your email, including the typography. Using the wrong fallback font can result in your email falling apart and rendering terribly.

Let's dive into how to choose the right fallback font.

Use a fallback font that has the same height as your web font

One of the most important aspects of a font is its vertical height. When choosing a fallback font, make sure you choose one that has the same vertical height as your web font. Failure to do so may result in other elements of your email being affected.

Choose a fallback font that’s the same type as your web font

If your web font is in the sans-serif family, it’s advisable to choose a fallback font from the same family (a good example is Arial). Likewise, if your web font is from the serif family, a good fallback font will be a serif (like Times New Roman).

Now that you know that you can use web fonts without fear of your emails not rendering correctly when email clients don’t support them, let’s quickly take a look at where you can get your hands on web-safe fonts.

Why do web fonts need licensing?

Before we look at some popular sources of web fonts, we must look at the legalities surrounding them – particularly licensing. Web-safe fonts need licensing for the simple reason that they were initially designed strictly for use on websites and mobile applications. Therefore, using them in email is considered as distribution, which goes against many End User License Agreements.

What that ultimately means is that you should expect to pay for the web font that tickles your fancy.

Web font in email: Where you can get yours

If you’re wondering where you can find web font for your next email campaign—we have your back.

Source: Campaign Monitor

Here are a couple of places you can visit:

Google fonts

By far one of the most popular places to get web fonts, Google Fonts is definitely the first place you need to explore. Not only will you have options galore, but Google Fonts also has the advantage of being a free service.

TypeKit

TypeKit is a popular web font service by Adobe. Although most of their web fonts were coded using Java (making them difficult use in email), TypeKit has enabled CSS only web fonts that can work well in email.

Other web font sources

Apart from Google Fonts and TypeKit, several other services offer excellent web fonts that are licensed for use in email. Some of them include:

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

Most of these are paid services due to licensing agreements, but the investment is well worth it.

How to embed your web font in email

Now that you’ve found your web font, you need to incorporate it into your email. You’ll definitely need to know a bit of code here. However, don’t worry as it’s something you can easily handle. There are three (easy) ways of embedding a web font in an email:

1. @import

One of the easiest ways of embedding a web font into an email is by using the import method. This is where you import a web font by placing the following line of code in your email head:

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

2. <link>

When you place this piece of code in the <head> of your email, your web font service will provide you with the <href> value for your web font of choice. If, however, you’re hosting your own web-font, you will have to point the URL to where you’re hosting your web font.

3. @font-face

@media screen {

@font-face{

font-family:'Open Sans';

font-style:normal;

font-weight:400;

src:local('Open Sans'), local('OpenSans'), url('https://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');

}

</style>

One of the biggest advantages of using this method to embed your web font is that it allows you to specifically choose the file format you want to import.

Why is this an advantage? Simple, there’s less room for anything to go wrong. The only drawback is that it’s difficult to find the URL of a web font if you’re using Google Font.

Wrap up

Is using a web font in email a good idea? It surely is. When done right, web fonts are a great way to add a spark to your emails, making them more interesting to read. As a result, you’ll enjoy higher conversion rates.

Here’s a summary of what you need to remember about web fonts in email: