When is a web font not a web font? When it’s an email font! In this tutorial I’ll walk you through implementing web fonts into your email campaigns.
Web Fonts and Web Safe Fonts
Web-safe fonts, like Arial and Trebuchet, Times and Georgia, are installed on most operating systems. As such, these “system fonts” will display on all of the software on those operating systems, including email clients, webmail clients, apps and browsers–therefore classifying them as being “web-safe”.
However, that safety comes at a cost. The ubiquitous characteristics of web-safe fonts mean that emails designed and developed using them are less likely to stand out in the inbox.
Standing out in the inbox is where custom fonts come in. Their unique characteristics give them a distinct point of difference alongside their web-safe counterparts and the emails that use them. For this very reason, brands use web fonts, sometimes investing in the creation of bespoke custom web fonts to stand out even further. Unfortunately, unlike web-safe fonts, web fonts won’t display on most emails clients, webmail clients, and apps. Very few of them, in fact.
However, this doesn’t, and this shouldn’t, stop you from using web fonts in your emails. Far from it! You do need to know which email clients, webmail clients and apps will display web fonts, which web font formats to use (yes, there’s more than one), where to get web fonts, and how to implement them into your emails. In this tutorial, I help you to do just that!
Email Clients, Webmail Clients, and Apps That Will Display Web Fonts
While web fonts aren’t web-safe, you can be safe in knowing which email clients, webmail clients and apps, will display them. You’ll find most of them on Apple operating systems–Microsoft Outlook and Thunderbird on macOS, Mail on macOS, Mail on iOS, and Mail on iPadOS.
At the time of writing, according to Litmus’ Email client market share report, over 50% of the world’s emails are opened on this handful of email clients, webmail clients, and apps. As such, it’s certainly worthwhile investing the time and effort implementing web fonts to display on them.
However, before you rush into implementing web fonts, find out if your recipients are using the email clients, webmail clients and apps that will display them. It may be that more than 50% of your recipients use them, and it may be that fewer than 50% of your recipients use them. Tools like the ones found within Litmus and Email on Acid will provide you with the data that will tell you.
Which Web Font Formats to Use
Now that you’re ready to implement web fonts into your emails, you need to know which web font formats to use. Web fonts are available in a variety of formats:
- TrueType Font (TTF)
- OpenType Format (OTF)
- Embedded OpenType (EOT)
- Web Open Font Format Font (WOFF)
- Web Open Font Format Font 2 (WOFF2)
- Scalable Vector Graphics (SVG)
Only one format will display on email: Web Open Font Format Font (WOFF).
Where to Get Your Web Fonts
Where you get your web fonts from will depend on your budget and your desire to be distinctive or exclusive. Essentially, there are three options:
- Free: fonts you’re more likely to see on other brands’ emails
- Licensed: fonts you’re less likely to see on other brands’ emails
- Bespoke: fonts you’re most certainly not going to see on other brands’ emails
Free: Google Fonts
Google Fonts provides hundreds of free, open-source font families, so it’s no surprise that it’s the go-to font foundry for many brands.
As such, you’re more likely to see more than one brand using the same “Google Font” on their emails, though not as many as those using web-safe fonts. You’ll also see some Google Fonts appearing on Google products too. Roboto is installed on Android and has been since Android 4.0 (Ice Cream Sandwich).
Licensed: Envato Elements
If you’re looking for premium web fonts at a bargain price, check out Envato Elements. You get access to a huge library of fonts, all for one low fee. They’re licensed for professional, commercial use too. Unlimited downloads means you can download as many fonts as you want. Filter the fonts library by “web fonts”, try a whole bunch, and download to your heart’s content.
But Envato Elements is more than just an awesome collection of web fonts. It also includes graphic templates, stock photos, audio, WordPress templates, and much more. All of this awesome, professional content is included with unlimited downloads.
Licensed: Adobe Fonts
Adobe Fonts, formerly known as Typekit, provides thousands of fonts, though you’ll need a Creative Cloud subscription to use them. They include well-known names like Baskerville and Futura and lesser-known names, like Mrs Eaves XL and Fenwick.
Unlike other licenses, the Adobe Font license doesn’t limit how many times a font is uploaded to a web page or an email within a given month (monthly page view).
Licensed: Typotheque
Typotheque prides itself on being the ‘first type foundry to introduce the concept of web fonts’. Its founder, Peter Biľak, has even written an article entitled Brief history of Webfonts! Typotheque offer hosted web font licenses, where you load your web font from their servers, and self-hosted licenses, where you load your web font from your servers.
Custom/Bespoke
If you really want to stand out in the inbox, you can opt for custom or bespoke fonts. Clearly, these come at a cost, but you can be sure of exclusivity as a result.
Some examples of custom or bespoke fonts are ‘Virgin Money Sans’, for Virgin Money, designed by Pentagram in collaboration with Nan, ‘Smiley Face’, for AO, designed by DesignStudio in collaboration with F37 and ‘BBC Reith’, for the BBC, designed by the BBC’s Global Experience Language team in collaboration with Dalton Maag.
How to Implement Web Fonts Into Your Email
There are three steps to implementing web fonts into your email:
- Load your web font into your email
- Style your email’s text with your web font
- Implement web-safe fallback fonts for instances when your web font doesn’t display
1. Load Your Web Font Into Your Email
To implement a web font you first have to load it, which you can do by using @import, <link> or @font-face CSS. I recommend the latter (unless you want your web font to display on Samsung Mail on Android 6.0 or Samsung Mail on Android 7.0, in which case you’ll need to use <link>), as @import and <link> can slow down the rendering of your email.
@import and <link>
- Using
@importwill increase the time it takes for your email to render, as it loads your web font inline as your HTML is uploaded. - Using
<link>will increase the time it takes for your web font to render, as it waits for your HTML to upload before uploading it. However, doing so allows you to add Samsung Mail on Android 6.0 and Samsung Mail on Android 7.0 to the list of email clients, webmail clients and apps that will display your web font.
To obtain the @font-face CSS, you need the font foundry’s stylesheet URL for your chosen web font (e.g. https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap for Google Fonts, Montserrat), which they’ll provide when you select it. When you paste this URL into your browser, you’ll be presented with the @font-face CSS. The @font-face CSS will look something like this, which, in this case, uploads the Google Font, Montserrat:
@font-face {
font-family:'Montserrat';
font-style:normal;
font-weight:600;
font-display:swap;
src:url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_bZF3gnD_vx3rCs.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Remember, you need your web font to be WOFF, not WOFF2, or it won’t display on your email, so be sure to check the format. For Google Fonts some extra steps are required to obtain the WOFF font.
Google Fonts
The following extra steps are required to implement a Google Font into your email, as at first the stylesheet URL presents a WOFF2 font instead of a WOFF font.
- Choose your Google Font
- Select + Select this style
- Select <link> or @import
- Copy the stylesheet URL (e.g.
https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap) - Paste the stylesheet URL into Google Chrome
- Select View > Developer > Developer Tools
- On the Developer Tools Menu Bar select ⋮ > More Tools > Network Conditions
- On User agent, uncheck Select automatically
- Select Internet Explorer, 9, 10 or 11 and refresh the browser until WOFF2 changes to WOFF in your @font-face CSS
Your @font-face CSS will now look something like this and is ready to use!
@font-face {
font-family:'Montserrat';
font-style:normal;
font-weight:600;
font-display:swap;
src:url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_bZF7g0.woff) format('woff');
}
Font Weights
Where there are multiple font weights available for your chosen web font, make use of them, and load them into your email. For Montserrat, there are nine weights, each denoted with a number. You can use the number to style your text (e.g. font-weight:600;). Don’t load all of them, of course, just the ones you need for your email. At the very least, you’re going to need a regular weight and a bold weight.
2. Style Your Email’s Text With Your Web Font
Style your email’s text with your web font using internal CSS, applying an !important declaration to override the inline CSS.
<style type="text/css">
p {font-family:'Montserrat' !important;}
</style>
Tip: If your web font doesn’t render, try removing the inverted commas around the web font family name (e.g. font-family:Montserrat !important;).
Why Use Internal CSS as Opposed to Inline CSS?
On each of the email clients and apps that display web fonts there’s support for internal CSS in addition to inline CSS. This support for internal CSS makes the styling of text within your email, with web fonts, reasonably straightforward.
3. Implement a Web-Safe Fallback Font
It’s always a good idea to implement a web-safe fallback font that will display on devices that don’t display your web font. The fallback font should be similar to your web font in its width, weight and x-height so that the text visually flows in the same way. In this example, Montserrat will fall back to Century Gothic, which will, in turn, fall back to the default sans-serif font.
p {font-family:'Montserrat', Century Gothic, sans-serif !important;}
Microsoft Outlook
Some versions of Microsoft Outlook will ignore your web-safe fallback font and instead will render the text you’ve styled with your web font in Times New Roman. There are several ways to prevent this from happening. Which one you use will depend on whether you’ve used the @font-face CSS technique to upload your web font or the <link> technique to upload your web font.
If you’ve used the @font-face CSS technique, wrap your @font-face CSS within a @media screen, @media query:
@media screen {
@font-face {
font-family:'Montserrat';
font-style:normal;
font-weight:600;
font-display:swap;
src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_bZF7g0.woff) format('woff');
}
}
If you’ve used the <link> technique of uploading web fonts, you’ll need to override your web font styling for each typographic element in your email (e.g. <h1>, <p>). You can achieve this by using internal CSS, wrapped within Microsoft Conditional Comments to target Microsoft Outlook, implementing your fallback fonts, and applying an !important declaration to override the web font styling:
<!--[if true]>
<style type="text/css">
h1 {font-family:Arial, sans-serif !important;
}
p {font-family:Arial, sans-serif !important;
}
</style>
<![endif]>
Viewing Your Email in the Browser
While support for WOFF is strong, you may want to include additional formats to ensure your web font displays in your recipient’s browser if they view it there.
Adobe Fonts serve WOFF, WOFF2 and OTF ‘out of the box’, and we’ve already seen that you can obtain the Google Font @font-face CSS for both WOFF and WOFF2, taking the steps I described earlier. At the time of writing, you can also obtain the EOT format by changing the user agent to Internet Explorer 8 and the SVG format by changing the user agent to Opera Mini – iOS.
With Web Fonts, Email Campaigns Come to Life
When you implement web fonts into your email campaigns, they really come to life. Here are three examples of emails featuring free, licensed and bespoke web fonts, respectively.
You’ve Added Custom Fonts to Your Email
So, that’s web font implementation for email! Make sure you test the email you’ve implemented your web font into, ensuring it displays where expected and the fallback font displays as expected, particularly on versions of Microsoft Outlook.
The web font experience doesn’t end there, though. If you use web fonts on your landing pages, you’ll be able to leverage the benefits of creating a consistent online brand experience for your recipients as they continue on their online journey.
Learn More About Web Fonts
If you’re new to typographic design and web fonts in particular, take a look at some of our introductory tutorials:
No comments:
Post a Comment