Add Custom Fonts to My Klaviyo Emails: Video Tutorial

If you're sick of the limited amount of fonts that you can use in and Klaviyo, this is the video for you.

In this video, I'm going to walk you through how you can use Adobe fonts in your Klaviyo emails to make sure that all of your email marketing communication is on brand.

The first thing you're going to do is go down to your brand library, select fonts, and you'll see here that there's three options. If you're using a Google fonts is going to be pretty easy, your font should be available here on the on Google list.

If you're using Adobe fonts, we're going to need to get the CSS address.

To do this, you will need to have a Adobe type kit license.

Jump over into Adobe fonts and find the font that you're looking for then follow these steps:

  • Activate the font
  • Select the little code icon </>
  • Assign the font to a project
  • Once you've assigned that font to a project, you can get the CSS address.
  • Copy everything that sits between the HTTPS down to .CSS
  • Go back to Klaviyo and paste that address, the click continue.

It's going to add all of your fonts and allow you to select fallback font. So when that font is not able to be used, what is your fallback? What font would you like to use instead?

Now we've added our fonts. We're going to go into our email templates. If you use them, otherwise you can go straight into your campaigns.

  • Open your Klaviyo email template or campaign
  • Select your very first text block within your email or template
  • Click 'Source'
  • Go back to my Adobe fonts window
  • Click import link and copy the style code.
  • Paste the code above the text.

Now you will need to define which fonts you're going to be using for what type of text. For example what font will be used for headings and what font will be used for body. The code below will help you define those styles.

  • Copy and paste the code below into your Klaviyo 'Source' code,
  • Then, make sure you replace your Typekit address and font selection
<style type="text/css">@import url("https://TYPEKIT_ADRESS_HERE.css");
 h1, h2, h3, h4 { font-family: FONT_NAME_HERE;}
 p, ol, li, ul { font-family: FONT_NAME_HERE;}
</style>
  • Once you have added the above code, click 'Save'
  • Check your fonts have changed to the fonts you want to use

You only need to add this code in the first text block, then it should carry the styles through.

If you add a new block the font will automatically apply based on the style. For example, 'Heading 1 - 4' from the drop down it will show your heading font, defined above and 'normal' will show your body copy (p, ul, li, ol).

Note: you will not be able to see the font in your font list, you must add them and define them within your source code when using custom fonts.

Feeling stuck? Book in a free call to see how we can help you set up your email marketing templates.