A Guide to Using Web Fonts in Email Marketing Communications

5 minute read

Team Adestra

Imagery and fonts are a huge part of a brand’s identity and even helps to subliminally confirm to a customer that your email communication is legit. With so much email spam hitting your customers’ inboxes, by not using your traditional font, your customer may be wary of engaging with it – worse still may permanently class it as spam.

So, If your brand uses a recognizable font the majority of the time and you send an email without it, your subscribers’ expectations could be disrupted.

Using the right fonts in the right way is key to keeping your audience engaged, and here are some thoughts about use of fonts to ensure they render correctly across different email clients:

Web fonts vs web safe fonts in email marketing

First, it’s important to understand the difference between these two types of font. Web safe fonts are default fonts that can be found across most systems and devices (familiar names such as Arial, Times New Roman, Verdana, etc.). Web fonts, however, are unlikely to be found on your operating systems and devices, although they are supported by some notable email clients:

Apple Mail
Outlook 2019
Outlook app
Default Android mail client (not the Gmail app)

So, what does this mean? You can use your preferred font for these email clients, for a start. However, we advise you to have a fallback font that will be seen by those who open your emails on a client not listed above.

Using web fonts in emails campaigns

If you use Upland Adestra’s Email Editor, you can ask your Account Manager for the possibility of adding your preferred font as an option. But if you are building your own templates, there are 3 ways you can achieve this in your HTML and CSS:

<Link> example

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

@import example

<style>

@import ulr('https://fonts.googleapis.com/css?family=Roboto');

</style>

@Font-face example

@Font-face {font-family: 'Roboto';

font-style: normal;

font-weight: 400;

src: local('Roboto'), local('Roboto-Regular), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxM.woff) format ('woff');

}

The best format for using fonts in emails is .woff; if you’ve never used this method, this is how you can get the above code:

Go to Google Fonts
Select your preferred font
Copy the font URL (highlighted 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.

Note: if you are hosting the font, you’ll need to link to where the font is hosted.

Using a fallback font for Outlook

When using a web font, you must also have a web-safe font as a fallback option that will be used on email clients that don’t support web fonts. For example:

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

As any email marketer knows, Outlook does things differently, so if you are using a web font, some versions of Outlook will default to Times New Roman, regardless of what fallback font you have in place.

If you are using a web font across your entire template, you can force Outlook to use your fallback font everywhere by adding the following CSS code directly after the <body> tag within your template:

<!--[if gte mso 9]>

<style type="text/css">

body, table, th, td, span, ol, ul, li {font-family: Verdana, sans-serif !important;

}

</style>

<![endif]-->

If, however, you are only using your web font in certain places within your template, you can target these individually by creating a class named ‘fallback-font’ for example, then applying that class to anywhere you are using that font. So therefore, the code to target Outlook would be as follows:

<!--[if gte mso 9]> <style type="text/css"> .fallback-font {font-family: Verdana, sans-serif !important;

}

</style>

<![endif]-->

Then within the template, you will need to apply your class of ‘fallback-font’ to the places where you’re using the web font, e.g.:

<td class="fallback-font" style="font-family: 'Roboto', Verdana, sans-serif;">

Your text

</td>

As you can see in the examples above, this code targets versions of Microsoft Office (‘mso’) greater or equal to 9 (‘gte’). If you want to target lesser or older versions of Outlook, use ‘it‘ instead of ‘gte’. Therefore, to target specific versions of Outlook you should know the equivalent version number: