Why you should reconsider web fonts. A simple method of implementing them. Type E: 06. The Web Font Issue.

                            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

AaBb Cc

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%

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

“
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.

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

The third step is to 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.

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.

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™

Unsubscribe:
Bye for now!

Beyond the Envelope

Save this email to start commenting

Save this email to start commenting