How to Add Custom Fonts in Email Templates

read
Last updated at:

Overview

Adding a custom font to an email template allows you to use your brand’s fonts in email messaging. You can use Google Fonts, Adobe Typekit, or self-hosted fonts in your emails. However, keep in mind that only certain email clients support custom fonts, and many popular clients (like Gmail and Yahoo) do not. 

This article will walk you through how to use custom fonts in your email templates, not your signup forms. For information on adding custom fonts to your signup forms, head to our article on Custom Fonts in Signup Forms

Custom Font Limitations

Custom fonts can help keep your marketing cohesive, aligning your email content with your ecommerce site. However, custom fonts may not render as expected on all devices or email clients. Klaviyo’s 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 subscribers.

Email clients that support custom fonts include:

  • Apple Mail
  • iOS Mail (the default email browser on iOS)
  • Google Android (except Android 2.3, which doesn’t support the @import method used by Google and Adobe fonts)
  • Samsung Mail (Android 8.0)
  • Outlook for Mac
  • Outlook App

In order to use custom fonts, the code must be manually added to each message you send. The font will not be available in the dropdown menu within the template editor, and custom fonts are not supported in product, button, or header/link blocks.

Select a Fallback Font

When using a custom font, always provide a web-safe fallback font to display for those recipients using clients that don’t support custom fonts. Common web-safe fonts include Arial, Georgia, Helvetica, Times New Roman, and Verdana. Find more web-safe fonts. 

Choose a fallback font that is similar in style to the custom font you use. You should also specify “serif” or “sans-serif” as a final fallback font, in case your selected fallback font is not available. 

Add a Google Font to Your Template

Search for your Google font here: https://fonts.google.com. Once you find the font you’d like to use, click on the font and click Select This Style. After selecting the font from the panel that appears on the right side, click @import.

Google_Font_url.png

Here, you will see the import URL for the font. Copy the URL from within the code. In this example, the URL is: https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap

In your email template, find and edit the first text block in your email. Click Source and paste the URL that you copied. To assign your font to headings, paragraph text, bullet points, and numbered lists, you’ll have to use these properties in your code snippet. The full code snippet should follow this format:

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

You only need to add this code to the first text block in your email. The subsequent text blocks will include the custom font.

Save the block. When you do, you should see the font applied throughout your message.

image2.png

Once you've added the snippet to the source code, you’ll see the custom font applied to any text that has a default style (Normal, Heading 1, Heading 2, etc.). If the font is not being applied to a portion of your text, navigate to that block and make sure that a style has been selected from the paragraph styles menu.

paragraph_menu.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 @import instead. On the following screen, you'll see the import URL; copy it. Take note of the font family as well. In the example below, the font family is agenda and the URL is https://use.typekit.net/dfb2jbi.css

image__20_.png

In your Klaviyo template, add in a text block at the top of your email. Click Source and add the following HTML. This includes the font's import URL and font-family (which is case-sensitive and must exactly match the font family name font in Adobe's font information modal). It also 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, sans-serif; }
</style>

You only need to add this code to the first text block in your email. The subsequent text blocks will include the custom font.

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

Adobe_font.png

Once you've added the snippet to the source code, you’ll see the custom font applied to any text that has a default style (Normal, Heading 1, Heading 2, etc.). If the font is not being applied to a portion of your text, navigate to that block and make sure that a style has been selected from the paragraph styles menu.

paragraph_menu.png

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. First, host the font files in a location that will be accessible to Klaviyo (for example, in your site’s assets or on a font hosting platform). Make sure to enable Cross-Origin Resource Sharing (CORS) by setting the Access-Control-Allow-Origin header to *, so the font can be accessed by your recipients’ inboxes. Learn more about CORS. 

To use the font you’ve hosted, add a custom snippet of code like the one below to the Source of your first text block.

In this example, we'll be using the font "Neutra Text." You must 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-h4); if you’re unsure, choose 400

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 */ 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 */ } p, h1, h2, h3, h4, ol, li, ul { font-family: Neutra Text, Verdana, sans-serif; font-weight: 400; } </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

You only need to add this code to the first text block to your email. The subsequent text blocks will include the custom font.

Once you've added the snippet to the source code, you’ll see the custom font applied to any text that has a default style (Normal, Heading 1, Heading 2, etc.) applied. If the font is not being applied to a portion of your text, navigate to that block and make sure that a style has been selected from the paragraph styles menu.

paragraph_menu.png

Use Multiple Custom Fonts

If you would like to use multiple custom fonts within one template, you can import and apply them to one or more font styles using a code snippet like the one below. Make sure to only assign each style (e.g. p, h1, h2) to one font. Using more than two custom fonts can impact load time for your emails, so we do not recommend using more. 

Multiple Google Fonts

To apply multiple Google Fonts, first select each of the fonts you’d like to use within Google Fonts. Once you’ve selected all the fonts you plan to use, click @import in the panel on the right and copy the URL. It will look something like this: https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600&family=Roboto:wght@100&display=swap

Add this URL to the code snippet blow. Add in the font names where specified, and adjust the styles each font should be applied to (e.g. p, h1, h2), if desired.

<style type="text/css">

@import url('FONT_URL');
p, ol, li, ul { font-family: INSERT_FONT_NAME, INSERT_A_FALLBACK_FONT, sans-serif; } h1, h2, h3, h4 { font-family: INSERT_FONT_NAME, INSERT_A_FALLBACK_FONT, sans-serif; }
</style>

Multiple Adobe Fonts

To apply multiple Adobe Fonts, activate each of the fonts you’d like to use within Adobe Fonts. Once you’ve activated all the fonts you plan to use, copy the import URL. The URL will look like this: https://use.typekit.net/dfb2jbi.css 


Add this URL to the code snippet blow. Add in the font names where specified, and adjust the styles each font should be applied to, if desired. 

<style type="text/css">

@import url('FONT_URL'); p, ol, li, ul { font-family: INSERT_FONT_NAME, INSERT_A_FALLBACK_FONT, sans-serif; } h1, h2, h3, h4 { font-family: INSERT_FONT_NAME, INSERT_A_FALLBACK_FONT, sans-serif; }
</style>

Multiple Self-Hosted Fonts

To add multiple self-hosted fonts, use the code below as a template. Additional font source URLs can be added to increase compatibility with different inboxes and browsers. Reference the section Add a Self-Hosted Custom Font to Your Template to see an example that includes multiple font sources and formats. Supported formats include WOFF, WOFF2, TTF, EOT, and SVG. 

<style type="text/css">

@font-face { font-family: INSERT_FONT_1_NAME;
src: url('FONT_URL.woff') format('woff'); } @font-face { font-family: INSERT_FONT_2_NAME;
src: url('FONT_URL.woff') format('woff'); } p, ol, li, ul { font-family: INSERT_FONT_1_NAME, INSERT_A_FALLBACK_FONT, sans-serif; font-weight: 400; } h1, h2, h3, h4 { font-family: INSERT_FONT_2_NAME, INSERT_A_FALLBACK_FONT, sans-serif; font-weight: 400; }
</style>

 

Additional Resources

x
Was this article helpful?
412 out of 795 found this helpful