Using Web Fonts within Emails

Do you find using fonts in email a bit limiting? When you have a great design do you find yourself playing it safe, always choosing a web safe font, like Arial, which then lacks impact?

People often assumed that using fonts within email can be quite restricting compared with websites but it needn’t be.

This guide provides an insight into three different methods you can use which can really make a difference to the look and feel of your email and your customer experience.  If you want to create more engaging emails, give them a try.

Let’s get started….

There are three ways to use web fonts with different results.  For this example we are using Google fonts and chose one typeface.

Method 1 using <link>

1. Place this code in the <head> tag
<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One" rel="stylesheet">

2. Add a CSS class to specify the font family in the <style> tag
.AlfaSlabOne {
font-family: 'Alfa Slab One', Arial, sans-serif;
}

Method 2 using @Import

1. Place this code in the <style> tag
@import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One');

2. Add a CSS class to specify the font family in the <style> tag
.AlfaSlabOne {
font-family: 'Alfa Slab One', Arial, sans-serif;
}

Method 3 using @font-face

1.  Type in a browser the url of the font to get the CSS declaration
https://fonts.googleapis.com/css?family=Alfa+Slab+One

2.  Copy/paste this CSS into the <style> tag
@font-face {
font-family: 'Alfa Slab One';
font-style: normal;
font-weight: 400;
src: local('Alfa Slab One Regular'), local('AlfaSlabOne-Regular'), url(https://fonts.gstatic.com/s/alfaslabone/v6/Qx6FPcitRwTC_k88tLPc-QYWpCd0FFfjqwFBDnEN0bM.woff2) format('woff2');
}

3.  Wrap a media query around the CSS declaration (this is to stop Outlook 07/10/13 from displaying Times New Roman instead of the fallback)
@media screen {
@font-face {
font-family: 'Alfa Slab One';
font-style: normal;
font-weight: 400;
src: local('Alfa Slab One Regular'), local('AlfaSlabOne-Regular'), url(https://fonts.gstatic.com/s/alfaslabone/v6/Qx6FPcitRwTC_k88tLPc-QYWpCd0FFfjqwFBDnEN0bM.woff2) format('woff2');
}
}

Which email clients are supported?

Email Client Method 1
using <link>		 Method 2
using @Import		 Method 3
using @font-face
Outlook 2000 NO NO NO
Outlook 2002 NO NO NO
Outlook 2003 NO NO NO
Outlook 2007 No fallback No fallback NO
Outlook 2011 YES YES NO
Outlook 2013 NO NO NO
Outlook 2016 YES YES YES
Windows 10 NO NO NO
Thunderbird 45 NO NO NO
Gmail App Android NO NO NO
Android 6.0 NO NO NO
iPhone 5S YES YES NO
iPhone 6 YES YES NO
iPhone 7 YES YES YES
iPad Retina YES YES YES
AOL Mail NO NO NO
GSuite NO NO NO
Gmail NO NO NO
Office 365 NO NO NO
Outlook.com NO NO NO

Top Tip:

Always specify a fallback web safe font. If Outlook is displaying text as Times New Roman, make sure you wrap the font-face with a ‘@media screen’.

In Summary

Overall support is low except for iOS devices, however Outlook 2011/16 are supported. Hopefully the next version of Outlook will continue this trend.  Web fonts are unlikely to be fully supported but as viewing on mobiles continues to increase this area needs to evolve to ensure a better quality experience.

Share