10 things you need to know about web fonts in email right now
- Updated on: 2017-09-04
- Read original article here
10 Things You Need to Know about Web Fonts in Email Right Now
KIM COURVOISIER - JUL 25, 2016
0 total results Filters (0)
Industry
Twitter Facebook LinkedIn
A number of years ago, our superwoman of email marketing, Ros, wrote a very popular blog post about web fonts in email. To this day, it’s one of our most popular pieces of content, so last fall we updated it with the help of another awesome email geek, Justin Khoo. And because we just can’t seem to get enough of web fonts in email, we’ve partnered with yet another great email marketer, Jaina Mistry, to share the latest and greatest on web fonts in email. So let’s get to the fonts.
With changing market shares increasing in email clients that support web fonts there’s now a great reason to dive into using web fonts in your email campaigns to get your image to text ratio just right. A few of the tips in this post involve code, but most don’t so prepare to learn to use web fonts like a pro in no time.
1. Web font vs. web safe font?
Web safe fonts are what you’re likely to be using in your emails right now. Fonts such as Arial, Verdana, Georgia, Times New Roman, and Courier are considered web safe fonts that can be used for live text in email. They’re the default fonts that are found on different computers, devices, and operating systems. They exist on almost all devices.
Web fonts are typically not found in multiple operating systems and devices. They’re specifically designed and licensed for use on websites. Web fonts allow for more creativity, as you aren’t limited to choosing a font that comes pre-installed on a computer.
2. Where do I get web fonts from?
One of the most popular and easy to use sources of web fonts is Google Fonts . While you won’t find some of the more popular fonts here, you will find great alternatives which are available for free. Yes, you won’t have to pay to use any of the Google web fonts in your emails. You can also download any of the fonts on Google Fonts to your computer so you can use them if you design your email in Adobe Photoshop or Sketch.
To make using web fonts in your email campaigns as easy as can be, Campaign Monitor’s powerful email builder takes all the guesswork out of using web fonts in your emails as they are built right into our system.
Our powerful drag-and-drop email builder has a multitude of fonts that can be used in your email campaigns and are supported by most email clients –and if they’re not, a suitable fallback font will be displayed instead – with zero extra work required on your part!
You can also use other web font services for a fee. Below is a list of web font services which house web fonts licensed for use in your email campaigns. (More on licenses below.)
FontShop
3. Licensing
A license is required to legally use a web font online. As web fonts have been used on websites for a few years, licensing is already in place that covers use on websites and even mobile apps. However, licensing for use in email isn’t quite as widespread. This is because the use of web fonts in email is often seen as redistributing the font. And for many web font services, this goes against their EULA (End User License Agreement).
Most licenses for use of web fonts in email are based on the number of monthly opens. Something to consider if you’re using a paid for web font in your emails.
4. Email client compatibility
As with many things in email, web fonts aren’t 100% compatible across all email clients. Generally, the following email clients have good support for web fonts:
– iOS Mail
– Android (default mail client, not Gmail app)
– Outlook 2000
– Outlook.com app
– Thunderbird
However, web font support depends on the email client and how the web font is embedded in the email.
5. How to embed web fonts in email
As you know, if you use Campaign Monitor’s email builder , we have web fonts built right in, but If you are coding HTML for your email campaigns then it can be surprisingly easy to serve up web fonts. There are three approaches, all with slightly different levels of support in different email clients.
@import
Currently, the @import method is not supported in AOL using IE11 and Android 2.3.
The
method is fully supported among the email clients listed above. Web font services will provide you with the href value to use for your web font of choice. If you’re hosting your own web font, you’ll have to change the href value to where you’ve hosted your web font.
@font-face
Think of the @font-face method as a direct-to-the-source sort of method of importing your web fonts. It can be more reliable to import the web font directly from the source as you can choose which format of web font you want to import. Especially if you’re given a choice, which some web font suppliers do have.
In the example above the WOFF font format has been imported, which is considered to be the most widely supported of font formats for email.
Getting a hold of the WOFF version of the font from Google Fonts requires use of either Safari or Internet Explorer.
Find the font you’re after and add it to your selection by hitting the little “+” symbol. A black bar will appear at the bottom of the screen – click on it to open it up.
You’ll see a URL for the font you’ve chosen – highlight that and open it up in either Safari or Internet Explorer. Once you do, you’ll see the @font-face declaration you’ll need to paste into your email.
However, be aware if you use this method in conjunction with Google Fonts, the URL may change in the future, so it’ll be something you would need to keep an eye on.
After you’ve imported your font using any of the above methods all you just have to add it to your font declaration like you would Arial, or Verdana.
email client market share survey done by Litmus reveals that three out of the top five most popular email clients support web fonts.
It is important to remember your own subscribers, though. Review which email clients and inbox providers they use.
You can see this in Campaign Monitor by looking at any Sent Campaign, Campaign Reports, Email Client Usage. Make the decision on if you should use web fonts in your emails based on what portion of your subscribers use email clients that support web fonts. If there’s a high enough portion – go for it.
If you do opt to use web fonts in your emails, it’s vital that you choose the right fallback font, should a subscriber use an email client that doesn’t support web fonts. Again, if you are using Campaign Monitor’s email builder, we take care of serving up a suitable fallback font for you. If you are coding, though, read the next section.
7. Choosing the right fallback font
A fallback font is a font that is shown to the subscriber of the email if their email client doesn’t support web fonts. You need to give choosing the right fallback font some thought. Keep in mind that the fallback font needs to be a web safe font, so you’re limited in your choice.
The vertical design of your email is incredibly important, and you don’t want it to fall apart when your second or third font choice is displayed. So you need to consider the x-height of the web font that you’ve chosen and choose a web safe font that has a similar x-height.
The animated GIF shows three different fonts which fit incredibly well together, in terms of their x-height. While Verdana does have an overall greater size, the x-height is similar to the other fonts. So vertical spacing of your email will be fine.
Another thing to consider when choosing the right fallback font is the feel of the font. If your web font is a serif font (like Times New Roman), you need to make sure you choose an appropriate serif font as a fallback. And the same if you’ve chosen a sans-serif font (like Arial). This ensures that the overall look and feel of your email doesn’t change if the web font is used or fallback font. You need to keep the design of your email consistent from client to client.
8. Outlook 2007/10/13 displays Times New Roman
Hooray for Outlook! There’s always one, isn’t there? Even if you’ve set your fallback font up correctly, Outlook won’t fallback to that font. Outlook will fallback to… Times New Roman. Great! Not so great if your fallback font isn’t Times New Roman.
The good news is that there’s already a workaround for this issue. Simply embed the following code in your email:
And use the class fallback-text wherever you have used your web font family like this:
StyleCampaign has put together a helpful Google Doc that outlines file sizes of the most popular Google Fonts.
10. Font pairing
Choosing the right fonts that work well together to elevate your email design is challenging. You don’t necessarily have to pair a sans-serif title font with a sans-serif body font anymore. Artfully choosing fonts that complement each other can make your email shine and draw your subscribers in.
If you need a little help with this, Font Pair can help you find the perfect Google Font pairings and also give you some inspiration on creating your own pairing for your email.
Wrap up
Unless you have strict brand guidelines that dictate which fonts you can use in your email designs, you should feel free to try out web fonts.
Using an email service provider like Campaign Monitor makes it super simple and you don’t need to know a lick of HTML code. But if you’re down with coding, then using any one of the many free and paid for services available, it’s easy to get your emails set up with web fonts. Bear in mind the costs of licensing specific web fonts, or there’s always the option of using free web fonts from Google Fonts. Remember to have fallback fonts in place, as it may be that the majority of your subscribers will see this font rather than your web font.
Think of web fonts as a nice-to-have right now. A little added bonus for those subscribers who are able to see them, and a way of pushing your email into the future, one step at a time.
*Special thanks to FontShop for the banner image in this post.
