Yes! While not all email clients have universal support for webfonts, several of the most popular email clients do. According to our friends at Litmus, the following list of email clients offer support for webfonts in 2020:

  • Apple Mail
  • iOS Mail
  • Google Android
  • Samsung Mail (Android 8.0)
  • Outlook for Mac
  • Outlook App

Adding Webfonts

Webfonts can be embedded in your emails after adding a reference to where your webfont is hosted or by adding the proper CSS into the style element. We will be using Google Fonts in our examples below.

import

The first method is to reference the hosted webfont using the @import CSS rule.

<style>
    @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900;');
</style>

Alternatively, you can also reference the hosted webfont using the link HTML tag.

<style>
    <link href="https://fonts.googleapis.com/css2?family=Lato" rel="stylesheet" type="text/css">
</style>

font-face

The last method is to use the font-face CSS rule. There are several format types available that webfonts are stored in: .svg, .eot, .ttf, .woff and .woff2. You will want to select either .woff of .woff2 as they have the most support across email clients.

To obtain the full CSS, visit the reference URL: https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900

Once you have the CSS, you can add it to the head element within a style tag.

<style media="screen">
  @media screen {
    @font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: 900;
      font-display: swap;
      src: local('Lato Black'), local('Lato-Black'), url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh50XSwiPGQ3q5d0.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
  }
</style>

Note the media="screen" and @media screen rule wrapped around the @font-face declaration are a workaround to help the webfonts render in some Outlook email clients.

Given the three options, which method should I use?

Both the @import and <link> methods work similarly and are well supported across many email clients. The important distinction between the two would be the @import rule will load the font as your email is being displayed, which can result in your email displaying the websafe font for a brief period during the loading time.

On the other hand, <link> will only display the font after the HTML has finished loading. This will only become an issue for larger email templates where the load time might be slightly higher. In many cases, either methods will work great.

The @font-face method is known to be the “bulletproof” method since you are adding the direct source of the fonts to your email. One thing to consider with this method is if your team is using an external online webfont, the URL can be changed in the future. This doesn’t happen frequently, but it can happen— so make sure you test your emails regularly.

Using Webfonts

Once you have imported your webfont, you can now use the font-family CSS property with the value of your webfont.

For example, you can create a CSS class and use it on a text element. Note that Sendwithus will automatically inline your CSS!

CSS

<style>
  .webfont {
    font-family: 'Lato', Arial, sans-serif;
    font-weight: 400;
  }
</style>

HTML

<p class="webfont">This text is a CSS webfont.</p>

Alternatively, you can directly insert styling within your HTML element.

HTML

<p style="font-family: 'Lato', Arial, sans-serif; font-weight: 400;">This text is an inline webfont.</p>

Supplying a Websafe Font

Since not all email clients support webfonts, it’s important to include a good websafe font as a fallback. Websafe fonts are considered “safe” fonts because they are typically pre-installed as the default font sets on the user’s operating system or device. Some of the popular websafe fonts include:

  • Arial
  • Times New Roman
  • Courier New
  • Verdana
  • Georgia
  • Palatino
  • Garamond
  • Tahoma
  • Impact

The best practice for selecting a websafe font is to select one that closely matches your team’s branding.

You’ll notice in some of the code examples, the font-family CSS property is listing a couple font options.

font-family: 'Lato', Arial, sans-serif;

The order of precendence for the fallback fonts are written from left to right. Given this example, the font precedence will be: Lato > Arial > San Serif.