Why you should reconsider web fonts. A simple method of implementing them. link View the web fonts – on the web! heading level 1 Type E: separator heading level 2 06. The Web Font Issue table with 2 rows and 1 columns row 1 column 1 Aa Bb Cc row 2 Web fonts Poppins’, Libre Baskerville’ and Pinyon Script’. out of table 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 link 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. heading level 3 Web font support. Each month, link 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 percent of those tracked! This was up from three of the top five – 46 percent of those tracked in the same month, two years ago! heading level 4 The case for reconsidering web fonts 1. 63 percent of emails opened in April 2016 by Litmus customers’ subscribers, were done so in email clients that support web fonts. That’s a 137 percent increase on the same month, two years ago. 2014: 46 percent 2016: 63 percent 2. A significant proportion of emails opened in April 2016 by Litmus customers’ subscribers, were done so in email clients on i OS or OSX operating systems – i OS Mail on i Phone (34 percent ), i OS Mail on i Pad (11 percent ) and OSX Mail on Mac (8 percent ), all of which support web fonts. 34 percent 11 percent 10 percent 8 percent 37 percent i Phone: 34 percent i Pad: 11 percent Google Android: 10 percent Mac: 8 percent No Support: 37 percent 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: table with 7 rows and 2 columns row 1 column 1 Operating System column 2 Email Client row 2 column 1 i OS column 2 Mail (i Phone) row 3 column 1 i OS column 2 Mail (i Pad) row 4 column 1 OSX column 2 Mail (Mac) row 5 column 1 OSX column 2 Microsoft Outlook 2011 row 6 column 1 OSX column 2 Microsoft Outlook 2016 row 7 column 1 Google Android 4.4 column 2 Native out of table heading level 3 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 link 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: table with 4 rows and 2 columns row 1 column 1 Well Known’ Font column 2 Google Font row 2 column 1 Avant Garde column 2 link Poppins row 3 column 1 Baskerville column 2 link Libre Baskerville row 4 column 1 Copperplate Script column 2 link Pinyon Script out of table heading level 5 A Type of email: a handbook for working with typography in email link graphic A Type of email. heading level 3 heading level 3 Anyone that has a hand in creating emails should read this book. Justine Jordan VP of Marketing, Litmus link Find out more right arrow heading level 3 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 link Google web font , using link Montserrat , the font used in this email, as an example. The first step is to visit link Google Fonts , and search for a font by name, or by using the filters on the right hand side. link graphic Search Google Fonts. The second step is to select the Select this font’ button. link graphic Select this font' Button. The third step is to select the Family Selected’ bar. link graphic Select the Family Selected' bar. The fourth step is to copy the web font url, in this instance, link https: slash slash fonts dot googleapis dot com slash css family equals Montserrat dot link graphic Copy the web font url. The fifth step is to paste the web font url into the address field of your link Safari or link Internet link Explorer browser, which will create a piece of CSS for you, linking to a WOFF format web font. link graphic Web font CSS. The sixth step is to copy the CSS from the browser, and paste it inside a at media screen media query, within an internal style sheet, within the less head greater of your email. less style type equals text slash css greater at media screen at font face font family: Montserrat'; font style:normal; font weight:400; src:local( Montserrat Regular'), url( visited link https: slash slash fonts dot gstatic dot com slash s slash montserrat slash visited link v 7 slash zhcz Wihj SQC 0o HJ 9TCYL 3hpw 3pgy 2g Ai visited link Ip 7WP Mi 0 dot woff )format( woff'); less slash style greater heading level 3 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. black square 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 link email protected dot Thank you for subscribing! separator Beyond the Envelope Trademark Copyright Paul Airy, 2016 plus 44 (0) 7962 177 477 (International) 07962 177 477 (UK) at Paul Airy link Unsubscribe : Bye for now!