Custom Fonts in Email Templates

read
Last updated at:

Overview

Because not all email clients allow and render <style> tags, especially web-based clients like Gmail and Yahoo, you can't reliably use fonts that aren't already available in Klaviyo. Our default fonts are pre-installed on the vast majority of computers and devices, so you can be confident you'll deliver a consistent experience for all people reading your emails.

If you'd like to experiment with custom fonts, however, you can enhance the fonts your recipients will see if they are using an email client that does support custom fonts.

Email clients that support custom fonts currently:

  • Apple Mail
  • iOS Mail (the default email browser on iOS)
  • Default Android email client

Whenever you decide to use a custom font, you should always provide a fallback font in case your first-choice font doesn't render for a particular user.

Klaviyo doesn't host fonts, but we do support ways to use hosted fonts in your templates. Google hosts a number of fonts at google.com/fonts, and you can also use fonts from Adobe Typekit, FontDeck, or another font provider if you have an account and they give you access to the font's @import embed code.

Please note that custom fonts are not currently supported in Product, Button, or Header/Link Bar blocks.

This guide will cover how to add a Google Font to an email template, as well as how to add a self-hosted custom font to a template.

Add a Google Font to Your Template

Search for your Google font here: https://fonts.google.com. Next, click on the font and click the Select This Font button on the upper right. After selecting the font, click on the Family Selected window that is minimized at the bottom of your browser. Make sure you're in the Embed tab, then navigate to @Import

2017-05-02_14-33-08.png

Here, you will see the import URL for the font. Copy this URL. In this example, the URL is: https://fonts.googleapis.com/css?family=Roboto.

In your email template, find and edit the first text block in your email. You only need to add this code to the first text block to your email. The subsequent text blocks will include the custom font.

Click on Source and add the following HTML. This includes the font's import URL and specifies which HTML elements will use that font:

<style type="text/css"> 
@import url('INSERT_FONT_URL');
p, h1, h2, h3, h4, ol, li, ul {
font-family: 'INSERT_FONT_NAME', 'INSERT_A_FALLBACK_FONT';
}
</style>

When you save the block, you'll see the new fonts being used.

2017-05-02_15-53-47.png

Add an Adobe Font to Your Template

You must have a subscription with Adobe to use Adobe fonts.

Search for your Adobe font here: https://fonts.adobe.com/fonts. After selecting your font, click the Code icon on the bottom left.
image__19_.png

A new window will pop up where you can add your font to an existing kit or create a new one. Then, click Save. On the next window, skip the Default Embed Code and click on the blue @import instead.
image__20_.png

In the next screen, you'll see the import URL. Copy this URL. In this example, the URL is: https://use.typekit.net/dfb2jbi.css

In your Klaviyo template, add in a text block at the top of your email. Click on the Source and add the following HTML. This includes the font's import URL and specifies which HTML elements will use that font:

<style type="text/css"> 
@import url('INSERT_FONT_URL');
p, h1, h2, h3, h4, ol, li, ul {
font-family: 'INSERT_FONT_NAME', 'INSERT_A_FALLBACK_FONT';
}
</style>

When you save the block, you'll see the new fonts in your template.

Add a Self-Hosted Custom Font to Your Template

If you've purchased or downloaded a custom font that's not hosted by a third-party source, you can still use it in a Klaviyo template. To use a self-hosted font, you'll have to add a custom snippet of code to the Source of one of your text blocks.

In this example, we'll be using the font "Neutra Text." You'll have to know the following about your custom font before editing the provided snippet of code below:

  • The URL of where the custom font is hosted
  • Font family of the font
  • Font weight you'd like to set for your "regular" font and for overall style Headers (h1-h6)

Use the following code snippet as your starting point, but make sure to update all URLs to reflect where your font is hosted, as well as replace all references to "Neutra Text" with your own custom font information:

<style type="text/css">
 @font-face {
 font-family: 'Neutra Text';
 src: url('https://host.net/fonts/Neutra2Text-Light-Lining.eot'); /* IE9 Compat Modes */
 src: url('https://host.net/fonts/Neutra2Text-Light-Lining.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('https://host.net/fonts/Neutra2Text-Light-Lining.woff') format('woff'), /* Modern Browsers */
 url('https://host.net/fonts/Neutra2Text-Light-Lining.ttf') format('truetype'), /* Safari, Android, iOS */
 url('https://host.net/fonts/Neutra2Text-Light-Lining.svg#webfont') format('svg'); /* Legacy iOS */
 }
 h1 {
 font-family: "Neutra Text", Verdana;
 font-weight: 600;
 }
 h2 {
 font-family: "Neutra Text", Verdana;
 font-weight: 600;
 }
 h3 {
 font-family: "Neutra Text", Verdana;
 font-weight: 500;
 }
 h4 {
 font-family: "Neutra Text", Verdana;
 font-weight: 500;
 }
 </style>

Once you've replaced all Neutra Text font information in the above code snippet with your custom font information, you can enter your customized snippet into the source code of the first text block in your template as shown below.

671829_pdf.png


Once you've added the snippet to the source code, you should see that any text that has been formatted as an h1-h4, changes to the appropriate custom font setting.

 
x
Was this article helpful?
76 out of 163 found this helpful