The proper way to add custom fonts in emails

In this article I will talk about the proper way to add custom fonts in email newsletters. 

I've been using the link method for a while but I recently started questioning it as the google fonts I tried to add in my newsletters looked wonky - it didn't really look like the fonts I wanted. For a while I thought is just fonts incompatibility but after trying the font-face method of importing fonts in the code, I found out I was wrong all the way. It looks like the font-face method works much better than the link one. 

This is how I used to import fonts in my email newsletters code:

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

Here is how to properly do it:

The CSS:

@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  src: local('Archivo Black Regular'), local('ArchivoBlack-Regular'), url(https://fonts.gstatic.com/s/archivoblack/v9/HTxqL289NzCGg4MzN6KJ7eW6CYyF-A.woff) format('woff');
mso-font-alt: 'Arial';
}

The HTML:

<table>
   <tr>
      <td style="border-collapse: collapse; font-family: 'Archivo Black', Arial, Helvetica, sans-serif; font-size: 20px; color: #222721; font-weight: bold">CALL TO BOOK YOUR APPOINTMENT NOW TO GET THIS EXCLUSIVE OFFER:</td>
   </tr>
</table>

To find the font-face for any google font copy paste https://fonts.googleapis.com/css?family=Archivo+Black in Internet Explorer - it will ask you to open up with Dreamweaver so you can grab the code.

You might have noticed a strange mso declaration, mso-font-alt: 'Arial'; that I sneaked in at the end of the CSS properties. That is the fallback to be used by Outlook so you don't end up with Times New Roman.

Happy codding! Your friend, the email snob.