How to Use Custom Fonts in Your Email Templates

custom fonts in your email

Fonts are one of the most important aspects of email design. They help convey the tone of an email just as much as the text does — an email written in Comic Sans, for instance, sends a very different message than one written in Times New Roman. While only certain fonts are hosted by all email clients, you may prefer to use a custom font in your emails, especially if you use a custom font on your website. Here are some tips you should keep in mind when using custom fonts in your email templates.

Downloading Custom Fonts

There are a number of websites where you can download custom fonts, but Google Fonts provides many free fonts is a great place to start. You can also download fonts from Adobe Typekit or similar sites if you have an account.

In Google Fonts, simply search for the font you’d like to use in the search bar. If you’re trying to match the font in your email templates to the font on your website but you’re not sure which font you use on your website, follow these steps:

  1. Highlight the text you are trying to match.
  2. Right click and choose “Inspect.”
  3. The font, font family, and font size will be displayed in the inspector.

Screen_Shot_2016-04-04_at_11_06_32_AM

Once you search for the font you’d like to use:

  1. Click “Add Selection.”
  2. Click “Use.”
  3. Copy the code that’s generated in Google.
  4. Go to your email template and toggle to the “Source” view.
  5. Paste the code into the “Source” block.
  6. Change the beginning of the code from “http” to “https.”

Google_Fonts

Email Clients that Support Custom Fonts

It’s important to keep in mind that not all email clients support custom fonts, so if you use a custom font in your email templates, your recipients might not have a consistent experience. Email clients that do not support custom fonts are Gmail, Yahoo, and other web-based email browsers. Email clients that do support custom fonts are Apple Mail, iOS Mail (the default email client for iOS devices), and the default email client for Android devices.

Since not all email clients support custom fonts, it’s worth researching the breakdown of your audience by email client, which you can view in Klaviyo’s Deliverability Reports. If you find that the vast majority of the people on your mailing list use Gmail, for example, you may be better off not using a custom font, or at least be able to provide a very similar fallback font.

Fallback Fonts

Your fallback font should be a font that is hosted by all email clients, and it should be as similar as possible to your custom font — i.e. in the same font family. So, if your custom font is a serif font, your fallback font should be, too.

W3schools.com shows how to format these fallback fonts, as well as common custom/fallback font combinations. You can even test out your custom fonts to see what they will look like in your web browser.

Conclusion

Custom fonts require minimal HTML knowledge to insert into your email templates and are a great way to maintain brand consistency between your website and your emails. That said, it’s important to keep in mind that not all email clients will display custom fonts, so know your audience, use your discretion, and be sure to provide a suitable fallback font.

A deep dive into creating a high performing win-back campaign

6 Newsletter Mistakes Ecommerce Stores Make that can be Easily Avoided

Urgency emails: 9 ways to use the psychology of scarcity in ecommerce …

.yuzo_related_post img{width:260px !important; height:250px !important;}
.yuzo_related_post .relatedthumb{line-height:16px;background: !important;color:!important;}
.yuzo_related_post .relatedthumb:hover{background:#ffffff !important; -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -o-transition: background 0.2s linear; transition: background 0.2s linear;;color:!important;}
.yuzo_related_post .relatedthumb a{color:#323b43!important;}
.yuzo_related_post .relatedthumb a:hover{ color:}!important;}
.yuzo_related_post .relatedthumb:hover a{ color:!important;}
.yuzo_related_post .yuzo_text {color:!important;}
.yuzo_related_post .relatedthumb:hover .yuzo_text {color:!important;}
.yuzo_related_post .relatedthumb{ margin: 0px 0px 0px 0px; padding: 5px 5px 5px 5px; }

jQuery(document).ready(function( $ ){
//jQuery(‘.yuzo_related_post’).equalizer({ overflow : ‘relatedthumb’ });
jQuery(‘.yuzo_related_post .yuzo_wraps’).equalizer({ columns : ‘> div’ });
})

Back to Blog Home
Get email marketing insights delivered straight to your inbox.