Updated 10.15.15: This post has been updated for accuracy.
Web fonts on websites give designers undeniably better creative options. The use of unique, compelling typography reflects the brand identity of the website. Web fonts add support for fonts that are not installed by default in a browser and are supported by all modern web browsers. Examples of web fonts include the popular simple and clean looking Open Sans to the distinctive Roboto Slab or the stylized Lobster.
However, when it comes to email, support for web fonts for email is very limited and incorporating them into your designs can present some interesting challenges.
If you’re adventurous or you require that extra brand fidelity for your emails, and don’t mind carefully selected fallbacks for clients that don’t support web fonts, then read on!
Which email clients support web fonts?
The best support for web fonts come from the Apple ecosystem – iOS Mail and Apple Mail. Web fonts were also supported by the Android native email client but starting with the Lollipop Android releases, Google replaced the email client with the Gmail mobile app, which in addition to not supporting style tags, do not support web fonts as well.
The remaining popular email clients have either nonexistent or limited support for web fonts. Specifically, these clients do not support web fonts:
- All major webmail email clients such as Gmail, Yahoo! Mail and Outlook.com.
- The various incarnations of the Gmail mobile apps.
- The Outlook 2007/10/13/16 desktop clients.
In fact, Outlook also has a particularly gnarly web font bug that we’ll go into later.
More information about font support can be seen in this guide.
Using web fonts in email
When it comes to web fonts in email, you have two options: Host the fonts yourself or use a web font hosting service.
Hosted web fonts
While there are several web font hosting services, the easiest option to get your feet wet is to use Google Web Fonts. Google Web Fonts provides you with a wide library of free fonts as well as an intuitive user interface to generate the necessary font stylesheet to insert into your email.
Here’s a quick overview on using Google Fonts:
Using Google Web Fonts, use the search filters to find the font you need, using either the name of the font or the characteristics.
Once you have found your font, click on the quick use button. The service will package the font into a stylesheet that you can paste in the <head> of your email.
?family=Lobster' rel='stylesheet' type='text/css
If you inspect the stylesheet, you will notice one or more @font-face rules defining the font as well as several links to download various formats of the font.
Now wherever you need to use the font, just refer to them with the font-family CSS style.
<p style="font-family: ‘Lobster’, Arial, sans-serif; font-weight: 400;">TEXT</p>
You should also make sure to select an appropriate fallback web font or “websafe font’– so that email clients that don’t support web fonts will use one that comes pre-installed. Some fonts are more web safe than others. In our example above, we’ve selected ubiquitous sans serif Arial font as a fallback.
An alternative option to use web fonts is to use the @import rule rule within your CSS. However, using a linked font stylesheet is the most straightforward and has the highest compatibility.
Hosting your own fonts
If you have been provided fonts to use for the email, you can host them on your own server and use the @font-face rule. One drawback to this approach is that you may have to do some tests to ensure that the fonts are compatible with the email clients you intend to support. StyleCampaign provides a good primer on this.
font-family: 'My Font';
src: url(https://myserver.com/example.woff2) format('woff2');
Outlook web font bug
As with many things email, web fonts come with its own particularly annoying problem. In this case: Outlook 2007/2010/2013/2016.
If you use a web font in your email, Outlook will ignore your fallback font and render your text using Times New Roman, a serif font, even though you might have specified sans serif fallbacks.
When Outlook encounters the @font-face rule in your stylesheet, Outlook registers the font name but does not process the font itself. When the font is used in your email, Outlook swaps the font with its default font: Times New Roman. The trick is to not have Outlook register the font in the first place.
You could make Outlook render your selected fallback font by hiding the linked stylesheet from Outlook by wrapping it within an Outlook conditional comment.
<!--[if !mso]><!-- -->
<link href='http://fonts.googleapis.com/css?family=Lobster’ rel='stylesheet' type='text/css' />
Outlook will ignore the linked stylesheet above and since it regards the Lobster font as simply missing, it will fall back to the next font in your chain which is Arial. Yay!
Others have found different ways to address this quirk such as using the font tag with the face attribute or overriding the web font styles in a CSS style block within a media query as Outlook ignores CSS within media queries.
font-family: ‘Lobster’, Arial, sans-serif !important;
Should you use web fonts?
Using web fonts has its advantages and challenges, but if you have a large audience reading your email on Apple devices and are careful, you can take advantage of the added design flexibility without running into some of its problems.
*Special thanks to Justin Khoo from FreshInbox for his contributions in updating this post.