How to Add Custom Fonts in Email Templates

Last updated at:


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 fonts are an easy way to make your brand cohesive from your emails to your ecommerce site. Keep in mind, as not all email clients allow and render <style> tags, especially web-based clients like Gmail and Yahoo, the fonts you do not come pre-built in Klaviyo may not render as expected. The Klaviyo 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, 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.

While Klaviyo does not host fonts, you can use hosted fonts in your templates. Google hosts a number of fonts at, 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 if you add a custom font, it will not appear in the font dropdown, but you will see it when you preview the email. Additionally, custom fonts are not currently supported in product, button, or header/link blocks.

This guide will cover how to add a Google Font and Adobe 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: Next, click on the font and click the Select This Style button on the right side. After selecting the font from the panel that appears on the right side, select Embed > @Import.


Here, you will see the import URL for the font. Copy this URL. In this example, the URL is: <style>@import url('');</style>.

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 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 look like the following:

<style type="text/css">
@import url('FONT URL');
p, h1, h2, h3, h4, ol, li, ul {

Select source again and save the block. When you save the block, you'll see the new fonts being used.


Add an Adobe Font to Your Template

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

Search for your Adobe font here: After selecting your font, click the Code icon on the bottom left.

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.

In the next screen, you'll see the import URL. Copy this URL. In this example, the URL is:

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 {

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 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-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(''); /* IE9 Compat Modes */ src: url('') format('embedded-opentype'), /* IE6-IE8 */ url('') format('woff'), /* Modern Browsers */ url('') format('truetype'), /* Safari, Android, iOS */ url('') format('svg'); /* Legacy iOS */ } p { 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.


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.

Additional Resources

Was this article helpful?
330 out of 626 found this helpful