Home Blog Web font support in emails

Share this post

Ondersteuning van webfonts in e-mail

Web font support in emails

Written by Wilbert Heinen / 14 July 2017 / Technique

Web designers have more and more creative options for using typography. These days, they can also choose a non-standard web font for their designs. They do have to take readability into account. Unfortunately, not enough of this is happening in email. And that’s a shame, because doesn’t everyone want the web font for the email and the website to be the same? In this blog article, you will read all about the pros and cons of web fonts in email. Including how to tackle the technical side of it. Afterwards, you’ll be able to choose for yourself whether or not to use web fonts in email.

Web fonts in email, yes or no?

The most important reason for incorporating web fonts in email is very simple: it looks better. Unfortunately email designers have learned the hard way that what is prettier, doesn’t always work in practice. And the same goes for typography in email. We fonts are not widely supported by all email clients, as you will read further down.

Increasing mobile opens

The increasing growth of emails being opened on mobile devices presents us with many opportunities. According to the latest Litmus numbers, from June 2017, an average of 51% of emails is opened on smartphone or tablet, of which 31% on iPhones, 11% on iPads, 4% on Google Android and 5% in the Samsung email app. Our statistics from the Email Benchmark 2017 confirm this. The standard email app for iPhone, iPad and Android devices do support web fonts, but the Gmail App, for instance, does not. This should be taken into account, but fear not: there are also desktop email clients that support web fonts, such as Apple Mail and the Outlooks for Mac. This means there is a considerable chance your recipient will still see the actual web fonts in your email!

E-mailclients die webfonts ondersteunen

Figure 1: Email clients that support web fonts


How do I use web fonts in email?

Using an email font can be done several ways. For instance, you can load web fonts using @import, or you can place a specific web font onto your own server. This can then be imported into your email from that location. This is done using @font-face. I explain below how you can integrate both methods into your email.

@import

The @import line gives you the option of importing styles from other style sheets. This is also done with Google Fonts. This @import line is placed at the top in your style sheet, and lets you import the Google font ‘Merienda’ for instance.

1

<style type="text/css">

>

2 @import url(http://fonts.googleapis.com/css?family=Merienda);

3 ...

4 </style>

You can now use the ‘Merienda’ font in email. In a table cell, for instance:

1 <td style="font-family:'Merienda', Verdana, Geneva, sans-serif;">

@font-face

The CSS line @font-face also makes it possible to use specific web fonts in your email. The advantage of this method is that you can not only use fonts from the Google Fonts library, but also a font specific to your brand.

The CSS using @font-face looks like this:

1 <style type="text/css">

2 @font-face {

3 font-family:'ExampleFont';

4 src:url('http://www.example.com/pad/naar/font.eot');

5 src:url('http://www.example.com/pad/naar/font.eot?#iefix')

6 format("embedded-opentype"),

7 url('http://www.example.com/pad/naar/font.ttf')

8 format("truetype"),

9 url('http://www.example.com/pad/naar/font.woff')

10 format("woff");

11 font-style:normal;

12 font-weight:normal;

13 }

14 ...

15 </style>

16 <td style="font-family:'ExampleFont', Verdana, Geneva, sans-serif;">

The conditional comment is used to tell Outlook that it should use a different font than what was indicated earlier. In the example above, Outlook will use the Verdana font for table cells in the email.

Link

You can also link to an external style sheet in the head of your HTML as an extra way to import web fonts in case the methods above don’t work quite as they should. This even works slightly better than the @import method.

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

You can also place an mso conditional around this, so you’re sure Outlook won’t read it.

<!--[if !mso]><!-->

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

<!--<![endif]-->

Since we’re talking about Outlook. If you have no recipients in your database who open their email in Outlook 2007, 2010, 2013 or 2016, you can use @import or @font-face. But if you do have some, there are unfortunately a few more actions to take to integrate web fonts into the email.

When you use @import or @font-face in your email, Outlook will convert all your fonts to Times New Roman, which is not desirable in most cases. But this can be prevented in one of two ways: either by placing the @import or @font-face in a media query or by defining a fall-back font in a conditional comment specifically for Outlook.

The media query will not be read by Outlook, and will be ignored, so your fonts will no longer be converted to Times New Roman. The result is that your web font is no longer displayed in Outlook 2000.

1 <style type="text/css">

2 @media screen {

3 @font-face {

4 font-family:'ExampleFont';

5 src:url('http://www.example.com/pad/naar/font.eot');

6 src:url('http://www.example.com/pad/naar/font.eot?#iefix')

7 format("embedded-opentype"),

8 url('http://www.example.com/pad/naar/font.ttf')

9 format("truetype"),

10 url('http://www.example.com/pad/naar/font.woff')

11 url('http://www.example.com/pad/naar/font.woff')

12 font-style:normal;

13 font-weight:normal;

14 }

15 }

16 ...

17 </style>

A conditional comment is a way of telling Outlook to use a different font than indicated earlier. In the example below, Outlook will use the Verdana font for the table cells in the email.

1 <style type="text/css">

2 @import url(http://fonts.googleapis.com/css?family=Merienda);

3 ...

4 </style>

5 <!--[if mso]>

6 <style>

7 td { font-family: Verdana !important;}

8 </style>

9 <![endif]-->

A final tip for web fonts in email

The last tip I want to leave you with: always include a good web-safe font as an alternative. Do pay attention to the height and breadth of the characters and make sure they coincide as much as possible. When the email is opened in an email client that does not support web fonts, this will have little to no influence on the alignment of the email. Think for instance of titles that take up two lines and pull apart your design.

websafe font

Figure 2: Web-safe font

Scroll omhoog