Webfonts in Email

Carlito · January 26, 2019

HTML

Email development has so many quirks that using custom fonts sounds like a suicide mission. It’s a common practice to use websafe fonts. When you work with multilingual content it’s an obvious choice. However, using fonts from a company’s brand book may be possible.

  1. Licensing
  2. Importing fonts
  3. Declaring fonts
  4. Fallback for Outlook

Licensing

You need a license to legally use a web font online. Use and licensing for website is common but not for email. This is because the use of web fonts in email is often seen as redistributing the font. And for many web font services, this goes against their EULA (End User License Agreement).

Most licenses for use of web fonts in email are based on the number of monthly opens. Something to consider if you’re using a paid for web font in your emails.

@import

According to Can I Email, this method will work on Outlook for Windows, macOS and a few selected mobile clients.

@import url('http://fonts.googleapis.com/css?family=Open+Sans');

A font foundry will provide you with the href to the font, unless you host it on your own. This method is widely supported:

  • iOS Mail
  • Apple Mail
  • Android (default mail client, not Gmail app)
  • Outlook 2000
  • Outlook.com app
  • Thunderbird
<html>
  <head>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

@font-face

This is barely supported besides Apple macOS.

<style type="text/css">
@media screen {
   @font-face{
       font-family:'Open Sans';
       font-style:normal;
       font-weight:400;
       src:local('Open Sans'), local('OpenSans'), url('http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
   }
}
</style>

Declare

Once you import or refer to a font, declare it inline in HTML:

<td style="font-family: 'Open Sans', Arial, sans-serif;">Open sans font for all!</td>

Fallback for Outlook

Test it on Outlook and if a fallback is necessary, create a class which degrades nicely from a custom font to Arial.

<td class="fallback-text" style="font-family: 'Open Sans', Arial, sans-serif;">Open sans font for all!</td>

Define CSS:

<!--[if mso]>
<style type="text/css">
.fallback-text {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->

Resources

Twitter, Facebook