Your subscriber engagement depends not only on WHAT you write in your emails but also HOW you present your text. The usage of eye-catching web fonts will style up your email. Choose a web font that fits the character of your message and displays correctly for email clients. For a more creative solution, consider using Google fonts in email campaigns!
Choose web fonts instead of images
Marketers often use images with styled text for headings and other parts of an email. We at Mailigen prefer the usage of web fonts instead.
A couple of great reasons are:
- Web fonts display regardless of whether or not images are blocked. Whereas, images in most cases need to be unblocked before being able to see them.
- The usage of web fonts reduces the loading time of your newsletter. Regardless of how many times you use the web font in a template, only one request for the hosted font file is required. As for images, the loading time depends on the number of images used in a template.
- No matter how good the quality of the images used in a template is, the text will always look sharper and better than an image.
Use Google fonts in email
Try Google fonts to style up your email text! But, what are Google fonts and why should you use them? Google fonts are high-quality fonts that you can include in your emails. Let’s look at their main advantages:
- Using Google fonts for email campaigns will allow you to use offers a vast range of high-quality open source web fonts for both commercial and non-commercial purposes.
- It is very easy to access them and to use them in emails. Follow the six steps below on how to use Google web fonts for HTML email
- All major email clients, such as Apple Mail, Microsoft Outlook (most versions), Lotus Notes, Thunderbird, Android, and iOS devices use Google fonts in emails.
Although Google fonts won’t display if images are blocked, there will always be fallbacks used instead, for example, sans serif. Therefore, recipients will be able to see the text of your email anyway.
How to use Google web fonts in HTML email
If you are an HTML user, follow these six simple steps to add Google web fonts in your email campaigns:
1st step
Go to https://www.google.com/fonts and choose your favorite web font. In this example, we are going to use Open Sans.
2nd step
After you have chosen your web font, click on a Quick use button:
3rd step
Select the font styles among which to choose later:
4th step
Choose the character sets you need. Latin is set by default. Choose any other if you are preparing content in different languages requiring specific letters:
5th step
Press on @import section and copy it:
6th step
Place the copied text from the @import section in the <style> tags of your email template
<style> @import url(https://fonts.googleapis.com/css?family=Open+Sans); /* Place your css style here */ <style>
7th step
Assign it to your chosen text:
<span style="color: #000000; font-size: 24px; font-family: 'Open Sans', sans-serif; line-height: 150%; margin: 0px; font-weight: bold;">Your title goes here</span>
And you are done! That’s how it looks in an email campaign:
Other web fonts for your email
If you do not want to include Google fonts in email campaigns, there are more web fonts that you can safely use, apart from the usual Arial or Times New Roman. Here are numerous email safe fonts recommended by our expert team:
font-family: Arial, Helvetica, sans-serif; font-family: Georgia, serif; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-family: 'Times New Roman', Times, serif; font-family: 'Arial Black', Gadget, sans-serif; font-family: 'Comic Sans MS', cursive, sans-serif;.t.c. font-family: Impact, Charcoal, sans-serif; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-family: Tahoma, Geneva, sans-serif; font-family: 'Trebuchet MS', Helvetica, sans-serif; font-family: Verdana, Geneva, sans-serif; font-family: 'Courier New', Courier, monospace; font-family: 'Lucida Console', Monaco, monospace; font-family: 'Brush Script MT', cursive; font-family: Monaco, Consolas,'Lucida Console', monospace;
Although the majority of email clients support default web fonts, there might be some that do not, like Outlook 2007, 2010 and 2013. For these Outlook versions, Google fonts change to Times New Roman. There is a workaround for this but it doesn’t completely fix the issue with Google web fonts as it only lets you choose a font that Outlook supports.
Where do I get web fonts from?
As we mentioned above, Google Fonts are free to use for your personal or commercial emails and are optimized for web and mobile. While you will find many great, high-quality options to choose from, you may not find some of the most popular fonts.
Therefore, if you want to explore a larger selection with more options you can check the following resources:
- MyFonts
- Commercial
- FontSpring
- Typotheque
- Process Type Foundry
- Production Type
- YouWorkForThem
- Village
- FontShop
These options are paid alternatives and can satisfy even the most demanding email designers. However, if you are just getting started, we recommend using google fonts in emails and see how your audience responds to the new design.
How to license your Web Fonts
Licensing is necessary to make legal use of a web font. If you are using Google Fonts in email campaigns you will not need to worry since they are approved for commercial use.
However, not all web font services have a system in place to ensure the fonts’ legal use. This is because the use of web fonts in emails is often seen as redistribution, which is against their EULA (End User Agreement).
Therefore, make sure you get a good understanding of how your web font provider handles licensing so you can legally use the fonts of your preference.
To sum up on web fonts
All marketers want their emails to stand out in the crowded inboxes. Default web fonts and especially Google web fonts are a great way to grab the attention of your email subscribers. Do not clutter your newsletter with unnecessary images in headings if you can use email safe web fonts instead; these will lighten up your email, speed up loading time and simply will look better. The hardest choice will be finding the right font for your email. Use an A/B split test for email content to find one which suits your audience best and the message character.
If you are looking for professional help to choose web fonts and integrate them in your email text, please contact our team. For the whole email template design, contact our Email Template Factory, and we will ensure your campaigns are both beautiful and successful.
I thought outlook reverted to Times?
Just tested this with email on acid, because I am keep to use google fonts in emails, but Outlook definitely renders the text as Times.
Thank you for noticing. We will update the text with the latest info about Outlook.
Thank you. Exactly the information I needed.
When you add this code you can give the text elements the class “fallback-font” which will make it use Arial instead if Times in Outlook:
.fallback-font {
font-family: Arial, sans-serif;
}