Fonts are a crucial part of your brand’s visual identity. Thus, naturally, you’d want to use the right web fonts in your emails.
“The beauty of fonts lies in their utility. Prettiness without readability serves neither the author nor the reader.” – James Felici
There are different elements which can greatly influence the performance of email marketing communication such as layout, colour, images, fonts and CTA buttons. Which web fonts are safe to use? Why can’t you simply use any font you want? What do you do when you want to use specific web fonts in email marketing?
In this article, we’ll cover web fonts in email marketing focusing on:
- What are web fonts?
- Web-safe fonts
- How to embed web fonts in email?
- Fallback web fonts
Let’s dive in.
Let’s think back to the wild west days of the early internet where you’d find the web filled with very basic fonts that made both designers and marketers cringe. The reason for it was due to the fact that marketers were forced to use a handful of web-safe fonts that were most common at the time.
However, things have changed. More and more email marketing designers are pushing the boundaries with the desire to do more. While the email copy conveys the message of your email, how you present that message also plays a vital role. Thus, the introduction of web fonts in email marketing.
There are two different types of fonts available to marketers for their emails: web fonts and web-safe fonts. However, do you know the difference is?
What are web fonts?
Web fonts are unlikely to be found on your operating systems or different devices and they don’t have universal support. However, there are some notable email clients where web fonts are supported such as Apple Mail, iOS Mail, Outlook 2000, Outlook.com app, Thunderbird and the default Android mail client (not the Gmail app). A couple of web fonts you might be familiar with are Open Sans and Roboto.
Keep in mind, web font support is dependent on the email client and how the web font is embedded in the email. If web fonts are NOT supported it is not a total buzz kill as there are fallback fonts that will be rendered instead.
In most cases, the fallback font will be either Helvetica, Arial or a generic Sans Serif font. The reason is that these are the default fonts of the most popular email clients. However, each email client has a preferred or default font. For the three most popular desktop email clients, these are the defaults: (a) Apple Mail = Helvetica, (b) Gmail = Arial and (c) Microsoft Outlook = Calibri.
Web fonts open up new roads of creativity in typography. They allow email designers to not only be creative but also accessible, as well as to stick to their brand’s look and feel, as they are not limited to choosing a font that comes pre-installed on a computer. One of the most popular and easy-to-use sources for web fonts is Google Fonts. Whilst you won’t find some of the more popular fonts there, you will find great alternatives which are available for free.
What are web-safe fonts?
They are the default fonts that are included with most operating systems. Hence why they are called web-safe fonts and we can assume that these fonts will work regardless of the device – or operating system – your recipients are using to view your email. This includes fonts such as Arial, Verdana, Georgia, Times New Roman and Courier New. They are all considered to be web-safe fonts that can be used for live text in an email.
Its good email design best practice to use web-safe fonts wherever you can, however, do not use more than two different fonts in an email. Also, it’s important to keep in mind that as cool as custom fonts look in an email, they can lose their charm if they can’t render on different devices. At the end of this article, you’ll find a list of web-safe fonts.
How to embed web fonts in email?
If you are sporting some know-how about web fonts and you know a thing or two about coding then you’ll love this section. Especially, if you’re building your own email templates.
There are three main approaches you can take to serve up web fonts in your HTML email. Just keep in mind all three have slightly different support levels in differing email clients.
This approach is one of the simpler ones for importing web fonts to your emails. With this approach, you have to place a line of code in the <head> of your email. Usually, at the top of your <style>. In the example below, the name of the imported font-family is ‘Montserrat’.
The URL you see in the example will be provided by the web font service you’re using (like Google Fonts). However, if you’re hosting the font yourself, you will need to point the URL to where the web font file is sitting.
Most of the email clients we mentioned above support this method.
The href value will be defined by your web font service provider, just like the @import method. Though, if you’re hosting the font file yourself, change the URL to point to the location of the web font on your server. Below is an example of the line of code which will need to be placed in the <head> of your email.
<link href=”https://fonts.googleapis.com/css?family=Montserrat” rel=”stylesheet” type=”text/css”>
This method performs somewhat better than the @import one – with support from all of the email clients we listed previously.
Think of this method as a direct-to-the-source method of importing web fonts. Since it allows you to specifically choose what file format you would like to import, it makes it the most bulletproof method for implementing web fonts.
Online web font services generally 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. Therefore, we suggest using it when you can.
If you have never used this method, here’s how you can get the code:
- Go to Google Fonts
- Select your preferred font
- Copy the font URL (highlighted in the image below) and paste it in either Safari or Internet Explorer (Google Chrome will give you the .woff2 type)
- Copy the code and paste it into the <style> section
If you choose to use this method, make sure you test your email regularly in order to ensure web fonts continue to render over time.
Choosing Fallback Fonts
What is a fallback font? It’s the font shown to your subscribers when their email client doesn’t support web fonts. Thus, it’s imperative to have a fallback web-safe font in place.
Every character has an x-height and has a space between two characters for differentiating (called Kerning). Hence, this plays a great role in the characters accommodated per line. Therefore, it’s necessary that your fallback font doesn’t occupy more space than your primary font.
In the example above, you can see that despite the different fonts being the same font size, due to the difference between the x-height the text in Arial takes nine lines, whilst the same text in Calibri takes eight lines. So, it’s important to choose your fallback font first and then select the primary one rather than vice versa.
Each email client has a default font if the one listed in the font-family stack is unavailable.
Gmail uses Arial (however if Chrome doesn’t support Arial, it changes to Helvetica)
Apple Mail – Helvetica
Outlook – Calibri.
For a complete list, including operating system coverage, of web-safe fonts that can be used as fallback fonts click here.
List of Web-Safe Fonts
- Arial, Helvetica, sans-serif
- ‘Arial Black’, Gadget, sans-serif
- ‘Bookman Old Style’, serif
- ‘Comic Sans MS’, cursive
- Courier, monospace
- ‘Courier New’, Courier, monospace
- Garamond, serif
- Georgia, serif
- Impact, Charcoal, sans-serif
- ‘Lucida Console’, Monaco, monospace
- ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif
- ‘MS Sans Serif’, Geneva, sans-serif;
- font-family: ‘MS Serif’, ‘New York’, sans-serif;
- ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
- Symbol, sans-serif
- Tahoma, Geneva, sans-serif
- ‘Times New Roman’, Times, serif
- ‘Trebuchet MS’, Helvetica, sans-serif
- Verdana, Geneva, sans-serif
- Webdings, sans-serif
- Wingdings, ‘Zapf Dingbats’, sans-serif
If you don’t have strict brand guidelines to dictate which fonts you can use in the design of your emails, you have the freedom to experiment with web fonts.
However, keep in mind that the use of web fonts in email marketing is still considered slightly experimental. Changes and updates to email clients’ rendering capacities are not usually announced and can occur sporadically. So, our recommendation would be to test your emails – often. Especially, if you have used web fonts in email templates that might not get updated regularly.
Overall, creating a beautiful email design with modern web fonts is easier now that it was before. With repetitive testing and good fallback fonts, your email can turn from just being good to being great.