Custom Fonts in Email Templates

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.

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

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

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

  5. 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.
  6. In your Klaviyo template, find and edit the first text block in your email.
  7. Click on the Source button to view the raw HTML.
  8. Then, add the following HTML. This includes the font's import URL and specifies which HTML elements will use that font:
<style type="type="text/css">  
   @import url('INSERT_FONT_URL'); 
   p, h1, h2, h3 {  
       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 a Self-Hosted Custom Font to Your Template

If you've purchased or downloaded a custom font that's not a Google font, you can still use it in a Klaviyo template. In order to do this, you'll have to add a custom snippet of code to the Source of one of your text blocks. 

The following section of this guide will illustrate an example, 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 */}
* {
font-family: "Neutra Text", Verdana;
font-weight: 400;
}
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.

 
Was this article helpful?
1 out of 1 found this helpful