Current email client support for web fonts, and a simple method of implementing them successfully.
View the web fonts – on the web!

Type E:



06. The Web Font Issue

 
AaBbCc
Web fonts ‘Poppins’, ‘Libre Baskerville’ and ‘Pinyon Script’.

There was a time when email designers and developers had good reason to avoid web fonts, not in the least part due to the limited number of email clients capable of displaying them. Today, there are still only a handful of email clients with that capability. What’s changed, however, and what makes web fonts worth reconsidering, is that the market share of those email clients has increased.

 

In this issue, I’ll look at current email client support for web fonts, and a simple method of implementing them successfully.

Web font support.

Each month, Litmus publishes a list of the top ten email and webmail clients their customers’ subscribers have used to open their emails. With over one billion emails being tracked worldwide, it provides a very good indication of current trends. In April 2016, four of the top five email clients on the list were capable of displaying web fonts – 63% of those tracked! This was up from three of the top five – 46% of those tracked in the same month, two years ago!

 

The case for reconsidering web fonts

 

1. 63% of emails opened in April 2016 by Litmus customers’ subscribers, were done so in email clients that support web fonts. That’s a 137% increase on the same month, two years ago.

 

2014: 46%

 

 

2016: 63%

 

2. A significant proportion of emails opened in April 2016 by Litmus customers’ subscribers, were done so in email clients on iOS or OSX operating systems – iOS Mail on iPhone (34%), iOS Mail on iPad (11%) and OSX Mail on Mac (8%), all of which support web fonts.

 

34%

11%

10%

8%

37% 

 
 

iPhone: 34%

 

iPad: 11%

 

Google Android: 10%

 

Mac: 8%

 

No Support: 37%

 

Though it’s vitally important to review the email clients used by your own subscribers, and make a decision for or against using web fonts based on the proportion of them that use ‘web font friendly’ email clients, this trend does present a strong case for at least reconsidering web fonts. To help you make that decision, here’s a summary of the mobile, tablet and desktop email clients that currently support them:

 

Operating System

Email Client

iOS

Mail (iPhone)

iOS

Mail (iPad)

OSX

Mail (Mac)

OSX

Microsoft Outlook 2011

OSX

Microsoft Outlook 2016

Google Android 4.4

Native

 

Finding web fonts.

Once you’ve decided to use web fonts in your emails, you’ll need to find some, and for that, you’ll need to go to a web font supplier.

 

For web fonts in email, you can’t go far wrong with Google Fonts, especially since its recent update, which has made it even easier to use. You won’t find any immediately recognisable font names, unless you’re familiar with Google Fonts already. There are, however, fonts that have similar characteristics to well-known fonts, such as Avant Garde, Baskerville and Copperplate Script. Here’re a few examples:

 

‘Well-Known’ Font

Google Font

Avant Garde

Poppins

Baskerville

Libre Baskerville

Copperplate Script

Pinyon Script

 
A Type of email: a handbook for working with typography in email
 
A Type of email.


Anyone that has a hand in creating emails should read this book.

 
Justine Jordan
VP of Marketing, Litmus
 
Find out more →
 

Importing a web font.

Having found a web font, you’ll need to import it into your email. Here’s a simple, six-step method of importing a Google web font, using Montserrat, the font used in this email, as an example.

 

The first step is to visit Google Fonts, and search for a font by name, or by using the filters on the right-hand side.

 
Search Google Fonts.
 

The second step is to select the ‘Select this font’ button.

 
'Select this font' Button.
 

The third step is to select the ‘Family Selected’ bar.

 
Select the 'Family Selected' bar.
 

The fourth step is to copy the web font url, in this instance, https://fonts.googleapis.com/css?family=Montserrat.

 
Copy the web font url.
 

The fifth step is to paste the web font url into the address field of your Safari or Internet Explorer browser, which will create a piece of CSS for you, linking to a WOFF format web font.

 
Web font CSS.
 

The sixth step is to copy the CSS from the browser, and paste it inside a @media screen media query, within an internal style sheet, within the <head> of your email.

 
<style type="text/css">

@media screen {

@font-face {
font-family:'Montserrat';
font-style:normal;
font-weight:400;
src:local('Montserrat-Regular'),
url(https://fonts.gstatic.com/s/montserrat/
v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-
Ip7WPMi0.woff
)format('woff');
}

}

</style>
 

Styling text with the web font.

Having imported the web font, you’ll now be able to style your text with it. Styling your text with the web font is as easy as adding its name to the font stack, immediately after font-family:. Ensure that the fallback fonts are proportionately similar to the web font.

 
font-family:'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;

So, there you have it! Sound reasons for reconsidering web fonts, and a simple method of implementing them.

Type E: is an email newsletter devoted to typography on email, created by Email Designer and Developer, Paul Airy. Please email your thoughts, suggestions and questions to type-e@beyondtheenvelope.co.uk. Thank you for subscribing!
 

Beyond the Envelope™
© Paul Airy, 2016
+44 (0) 7962 177 477 (International)
07962 177 477 (UK)
@Paul_Airy
Unsubscribe:
Bye for now!