Find articles, videos and help to use Pure360 to the max.
  1. Pure360 Help Center
  2. Template Tools
  3. HTML Editor

Articles in this section

Using Web Fonts In Email

Web fonts open emails up to lots of new ways of being creative with typography in your marketing emails. There are a range of resources available that offer free web fonts that can be used in email campaigns. One of these resources is google fonts.

Current Support

Web fonts are not currently supported universally, but a lot of email clients currently support them:

  • AOL Mail

  • Android Mail App (Native)

  • Apple Mail

  • iOS Mail

  • Outlook 2000

  • Outlook.com app

Where the font is not supported a fallback option will be used (details of how to set this up can be found later in this guide)

How to use a web font

We would suggest one of two methods when using a web font:

Method 1 – @import

Using @import, you need to add a code snippet to the top of the email within the style tags. Preferably, the first thing within the style tags should be the @import declaration.

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

The above code is a link to the font ‘Open Sans’ found on Google fonts. The next step is to simply call the font within your email as normal.

font-family: ‘Open Sans’, sans-serif;

In the above example we have also added a fallback of ‘sans-serif’. This will use the default sans-serif font of the recipient’s machine.

Method 2 – @font-face

For the @font-face rule we need to know the exact file type. You can get this from google fonts by pasting in the URL of the font into your browser. This will then give you the code need to add to the email.

@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/v13/K88pR3goAWT7BTt32Z01m4X0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;}

It should look similar to the above. As with the @import method we need to place this within the style tags of the email. It is then a case of using it as follows:

font-family: ‘Open Sans’, sans-serif;

 

Fallbacks for Outlook 2007/10/13

Unfortunately Outlook does not support web fonts, and should it find one in your email will default all text to ‘Times New Roman’, however there is a solution to help resolve this issue:

@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/v13/K88pR3goAWT7BTt32Z01m4X0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;}}

What is happening in this example is that we are wrapping the @fontface within a media query, thus hiding it from Outlook. This means Outlook will now ignore the webfont and use the fallback font you have previously declared.