Using Web Fonts and Web Safe Fonts In Email – Everything You Need To Know

Email marketing is becoming more and more competitive with every passing day. In 2023, businesses, old and new, recognize the immense value email packs as a communication channel and are, thus, extremely keen on including it in their scheme of things. All this means that email marketers have their work cut out- with their target audiences being flooded with campaigns left, right, and centre, they have no choice but to go absolutely full throttle with their presentation and creativity to have a decent shot at claiming the spotlight.

Now, there are many ways of going about this. One of the most reliable measures include focusing on your typography. Your choice of font is significant to your marketing communication for your typography goes a long way toward building your brand identity and making your email newsletter templates stand out.. Selecting the right font is essential for two major reasons:

1. It helps solidify the tone of your copy. You wouldn’t be using Times New Roman to write birthday invites now, would you?
2. From a technical standpoint, not every font is compatible with all email clients out there.

The second point is what brings us to our topic of discussion today- web safe fonts.

A Brief Introduction

Web safe fonts are those that are found by default across several devices and operating systems. They are not to be confused with web fonts, that are specifically designed and licensed to be used on websites. While CSS web safe fonts are invoked by the browser from your local font directory, web fonts are summoned from a server (either an external one like Google or Adobe or one you have hosted yourself). Since web safe fonts are highly likely to be pre-installed on the subscriber’s device, email marketers prefer utilizing them in their campaigns. That said, web safe fonts for email are extremely small in number, thereby greatly curtailing your creative liberties. 

The most popular web safe fonts are:

• Arial
• Verdana
• Helvetica
• Times New Roman
• Georgia

Besides these both, there is another category of fonts as well: email safe fonts. As the name suggests, these fonts receive support from all the widely used email clients in the market. Therefore, if you use them to craft your interactive email templates, you can remain assured that your subscribers will be viewing them as is in their inboxes. Much like the case with web safe fonts, email safe fonts are limited in number as well (and there’s a considerable overlap between the two lists), limiting your chances of standing apart. 

Now, we have two categories of fonts which we know will work for sure. However, they come at the cost of your creative freedom.  Quite a fix, right? This dilemma leads us to our next section.

The Need For Using Web Fonts In Emails

As mentioned earlier, the whole point of incorporating charming typography in your emails was to rise above the crowd. While with web safe and email safe fonts, you have the assurance of your copy rendering as desired across all devices and environments, your “wow factor” will have to be compromised a touch. 

This is why using web fonts becomes necessary. What about the lack of support, you ask? Well, you can always declare a fallback font- the font that will show up should your original choice fail to receive support from the email client. Goes without saying, your fallback font must belong to the family of  CSS web safe or HTML email safe fonts.

Another method involves using font stacks. They allow you to list out your font options by order of preference and apprise email clients of the same. This way, even if your top choice doesn’t load, at least you can have the next best thing reflected in your emails. The rule of thumb that is followed while building a font stack is to start with custom fonts and then gradually gravitate towards generic options. 

If none of the fonts listed in your stack is available, the email clients will resort to using their default fonts. For your reference, find listed below the default fonts of the three most popular email clients in operation.

• Apple Mail: Helvetica
• Gmail: Roboto
• Outlook: Calibri

Things To Keep In Mind While Using Web Fonts

Web fonts amplify the visual appeal of your emails, sure, but you have to take into account multiple factors to ensure smooth execution. Let us take a look.

Compatibility With The Email Client

The major chatter around the feasibility of using web fonts in emails hinges around the support offered by email clients, so we feel it is fitting to start this section with this 

topic. 

At present, the following email clients are compatible with web fonts:

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

Certain versions of Outlook for Windows contain partial support for web fonts in email. As per Gmail, the only web fonts it supports are Roboto and Google Sans which are, not surprisingly, fonts that Gmail uses itself. 

So, if a sizable number of your subscribers use email clients other than these, you must take care to declare a fallback font or use a font stack.

Sourcing Web Fonts

There are many resources online where you can find web fonts. One of the most popular ones is Google Fonts, not because it is a repository of the most popular fonts, but owing to the fact that it offers incredible alternatives for them, absolutely free. Additionally, it gives you the choice of downloading web fonts which you can then use across various design softwares such as Sketch and Adobe Photoshop. 

Other reliable web font services are paid in nature. Below, we list down a few,

• Adobe Fonts (if you have any Creative Cloud subscription, you get this by default)
• Type Network
• Optimo
• Production Type
• MyFonts
• Fontspring

Keep in mind that each of these platforms require you to obtain the correct license to be able to add them in your emails. However, since using web fonts in email is viewed as redistributing the font, the practice of licensing them for use in emails isn’t as common. In fact, for many web font services, this is in direct violation of their EULA (End User License Agreement). 

Embedding Web Fonts In Email

As discussed previously, web fonts aren’t present by default on our local devices. They are hosted at a different location and to use them in your emails, you have to import or embed them. The steps below illustrate how you can go about it. 

1. Locate the URL of your web font. You can get this from the web font service you are using. In the event of you hosting the font file yourself, you willl have to obtain the URL from your server. So that subscribers are able to access the web font, ensure the URL is public and not tied to a local server.

2. Having procured the URL, now you proceed to importing the web font. 

3. There are three approaches you can use for the same: @import, <link>, and @font-face. @import stalls the loading of the web font you are importing till the time the HTML it is embedded in finishes loading, so the web font tends to appear a little after the remaining elements of the email. <link>, on the other hand, loads the resource line as the HTML file’s code is read. Finally, @font-face lets you embed your web font directly from the source, a wise approach as it gives you the freedom of choosing the format of the web font you wish to import (online web font services usually offer five file formats: .woff, .eot, .svg, .woff2, and, .ttf).

Ticking The Right Boxes With The Fallback Font

Selecting the right fallback font goes a long way towards preserving the integrity of the user experience your emails aspire to deliver. The following pointers will help you make the right call. 

• Make sure the typeface of your fallback font is the same as that of your original font. For instance, if your web font is from the sans-serif family, your fallback font needs to be from the same family as well. 
• Select a fallback font that has a similar x-height (font’s vertical height) as that of your web font. 
• The kerning (space between characters) of your fallback font should be similar to your web font. 
• The vertical spacing and font-width of your fallback font should closely match that of your web font.

As you might have already guessed, the intention behind all these measures is one- to maintain the consistency of your email design. 

Few Best Practices 

• Whenever possible, avoid using more than two different fonts in your email. Doing so is frowned upon by spam filters.
• Figure out which email client is used by the majority of your subscribers and use fonts that best agree with it.
• One thing you can do to circumvent email client limitations for your web font is include the copy within images and animations in your email.
• Always look to use web safe and safe fonts for email that are accessible. Arial, Arial Black, Verdana, Times New Roman, and Tahoma are some fonts which are both web safe and accessible. 

Wrapping It Up

Using web safe fonts for email is critical for they help make certain that subscribers receive a uniform experience irrespective of whether they are able to view your web fonts or not. At the same time, the importance of web fonts can’t be disregarded as well- they make your email templates engaging and visually enticing. However, in order to make your emails accessible, you must get into the habit of declaring a fallback font or a font stack and this is where web safe and HTML email safe fonts need to be prioritized. We hope the insights shared above have been able to give you sufficient clarity regarding them.