Skip to main content
Share

We know that email marketing works hard as a digital tool, with 73% of marketers rating it as ‘excellent’ or good’ in terms of return on investment.

Within this, however, there are different elements that can greatly influence the performance of email marketing communications such as images, layout, colors, CTA buttons, and fonts.

We’ve already discussed the role of fonts as a crucial part of your brand’s visual identity. If your brand uses a recognizable font the majority of the time and you send an email without it, your subscribers’ expectations are disrupted and they are more likely to interpret your email as spam. Using the right fonts in the right way is key to keeping your audience engaged.

Web fonts vs web safe fonts

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
  • iOS Mail
  • Outlook 2000
  • com app
  • AOL mail
  • 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

If you use 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:

<Link>

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

@import

<style>

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

</style>

@Font-face

@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 emails is .woff; if you’ve never used this method, this is how you can get the above code:

  1. Go to Google Fonts
  2. Select your preferred font
  3. Copy the font URL (highlighted below) and paste it in either Safari or Internet Explorer (Google Chrome will give you the .woff2 type)
  4. Copy the code and paste it into the <style> section.

Google fonts website screenshot

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 have a web safe font as fallback that will be used on those email clients that don’t support web fonts.

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

As you may know, 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:

  • Outlook 2000 – Version 9
  • Outlook 2002 – Version 10
  • Outlook 2003 – Version 11
  • Outlook 2007 – Version 12
  • Outlook 2010 – Version 14
  • Outlook 2013 – Version 15

Finding web fonts

&