It’s been more than 40 years since the first email message was sent, and the look and feel of an email have come a long way since then. These days, design and fonts play a critical role in getting your email marketing message front and center with your subscribers. And web safe fonts, in particular, are a tricky beast to personalize to your brands.
Learn, how to make emails look pretty & boost your sales and revenue.
Fonts are an essential way to reflect your brand personality. Yet, in the digital space, specialized fonts require that recipients of your message “own” the same font on their device. But with the advent of “web fonts” and “web safe” fonts, that’s not the case anymore.
Web Fonts vs. Web Safe Fonts – What’s the Difference?
Like, you are using web safe fonts in your emails (particularly your personal emails). Fonts like Arial, Verdana, Georgia, Times New Roman, and Courier are deemed “web safe fonts” or “email-safe” because they are installed by default on just about every computer, device, and operating system there is.
Web Safe fonts should not be confused with Web fonts. Web fonts are not installed on every operating system and device. That said, oftentimes, you’ll find Web fonts are embedded into web browsers and downloaded into a user’s browser through rendering and applied to text.
The advantage of web fonts is the increased flexibility and versatility to make your text more attractive and provide more of a brand experience.
Where Can I Find Web Fonts?
Google Fonts is one of the easiest sources to find web fonts. You’re able to download the fonts for free and use them how you like—in Adobe Photoshop, Sketch, etc.
You can also choose from web fonts from paid services like the following:
MyFonts
Commercial
FontSpring
Typotheque
Process Type Foundry
Production Type
YouWorkForThem
Village
FontShop
You can also use a proprietary font by hosting it on an online hosting platform and linking to it. However, often when including a custom web font, you’ll need to license it. Generally, the costs for licensing web fonts depend on the number of monthly opens.
Adding Web Fonts to Your Email
An important note: Downloading a web font to your computer does not mean it will render properly in your subscribers’ inboxes. You’ll need to add the web font into the code of your email in some form.
There are three primary methods to do so:
1. Use @import
@import may be the easiest method to import web fonts into your email. Just add the below-mentioned code within the head tag of your email, preferably at the top of <style>.
@import url(‘https://fonts.googleapis.com/css?family=<fontname>’); If using Google fonts
Or
@import url(‘custom url where the font is hosted’);
You can get the URL from your web font service. For companies hosting the font themselves, the link has to be directed to the address of web font file.
2. Use <link> tag
Similar to @import method, the href value is either determined by the web font service or the address of the hosted server of the font.
<link href=”https://fonts.googleapis.com/css?family=fontname” rel=”stylesheet” type=”text/css”>
- <link> tag versus @import
There are two things to consider when choosing between the <link> method and the @import method: Support and Load Time.
The <link> method is supported by AOL Mail, Native Android mail App (not Gmail app), Apple Mail, iOS Mail, Outlook 2000 and Outlook.com App.
The @import method delays the loading of the web font that’s being imported until the HTML in which it’s embedded gets fully loaded. The <link> method loads the resource inline. If your web font file is particularly large, the @import method may be a better bet given that the email gets loaded even if the web font is “on its way.” If the web font is smaller, then the <link> method may be sufficient.
3. @font-face Method
Five file formats are mainly available in the online web font services.
- .eot
- .woff
- .woff2
- .svg
- .ttf
Emails work the best with .woff format. Using the @font-face method enables you to choose the file format you wish to import.
@font-face{
font-family:'Gill Sans MT';
font-style:normal;
font-weight:400;
src:local('Gill Sans MT-Regular'), url(link) format('woff');
}
Example of Web Fonts in Email
Fortnum & Mason uses at least one web font in their email text:
Email Web Font Compatibility
Web fonts are compatible in the following email clients:
- AOL Mail
- Native Android mail App (not Gmail app)
- Apple Mail
- iOS Mail
- Outlook 2000
- Outlook.com App
While Outlook 2000 and AOL Mail may not be a big portion of your list, the other 4 email clients are among the top 10 in terms of use according to Litmus.
As you can see, many email clients (and notably some of the bigger one, like Gmail) don’t support web fonts. This is why it’s important to provide a fallback or “default” font for your subscribers who won’t get to enjoy the unique experience.
Choosing the Right Fallback Font
Your fallback font should match as closely as possible to your email design and the web font you chose. For example: If your web font is a serif font, your fallback font should also be a serif font.
To be safe, you should also choose a fallback font that has roughly the same vertical height (or x-height) of your chosen web font. This way, your overall design doesn’t suffer too much from lack of web font support.
To get a clearer idea on web fonts and their fallback fonts, check out CSS Font Stack.
Outlook Issue with Web Fonts
To put it kindly, Outlook is the one email client that does everything… “differently.”
Outlook won’t fallback to a font you choose out of the box. Instead, it will fall back to Times New Roman.
There is a workaround for this problem.
You only need to embed the code given below.
<!--[if mso]>
<style type=”text/css”>
.fallback-text {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->
Use the class fallback-text if you have your web font family as below:
<td class=”fallback-text” style=”font-family: ‘Open Sans’, Arial, sans-serif;”>Open sans font for all!</td>
Remember to TEST
As an email agency we recommend when it comes to your email marketing, test your web fonts and fallback fonts. Every email client renders web fonts differently—so test to ensure your creativity doesn’t go unnoticed.
Are Web Fonts Worth It?
Look at your mailing list and see how many subscribers view your emails in an email client supporting web fonts. For example, if your subscriber list is heavy on iPhone use, then using web fonts may be worth the effort. If a predominant portion of your list is on Gmail (which doesn’t support web fonts), then perhaps it isn’t worth the effort.
An Alternative to Web Fonts in Email
Is there a font you REALLY want to use? Put it in an image and provide suitable alt tags and inline styling to format it. Remember this: Make sure you maintain the 80/20 text-to-image ratio while doing so. Images-only emails can create their own issues.
Closing Thoughts
If you find it’s worth exploring, using unique web fonts in emails can be innovative and a great way for your messages to stand out from the crowd. If you need help moving forward with web fonts in your email campaign management, InboxArmy would be more than happy to assist you.
Check our email portfolio HERE.
