Adding Custom Fonts to Klaviyo

Consistent branding across your emails and website helps to promote a "premium" and "established" impression to your customers. However, consistent email branding becomes more complex as emails are viewed in different apps and browsers and across various devices.

  

Should you use a custom font?

Custom fonts are not necessary to establish unique and premium branding. With a quality logo, icons and brand colours, you can still have a solid and unique brand presence with a web-safe font. There are 20 web-safe fonts available on Klaviyo and Shopify, which are supported across the internet.

 

We'd recommend not using the custom Shopify fonts as these are generally not available outside of Shopify, and you are unlikely to be able to have the same font in Klaviyo or design tools such as our preferred ones, Canva and Figma.

 

Other great custom options are Google Fonts and Adobe Fonts, which are widely recognised.

  

When should you not use a custom font in Klaviyo?

There are no hard rules on this. However, no script or handwriting fallback fonts are available in Klaviyo, and non-Google custom fonts currently don't render correctly in all Gmail access points. If a unique font, script, or handwriting font is an essential component of your brand, and it is not a Google Font, then it's best to create those font elements as images to use in emails.

  

Adding a custom Google Font on Klaviyo

Navigate to "Images & Brand" in the left-hand menu, then click the "Fonts" tab at the top. "Google Fonts" will be your first option.

 

Select your chosen Google Font in the list and then expand the font variant dropdown to select all relevant variations. If in doubt, select them all. If you forgot to do this, you can come back and edit the font after you've added it.

 

Select the most similar fallback font from the dropdown and click Add Font. This will make the font available for use in emails and signup forms.

  

Adding Adobe Fonts from your Adobe Creative Cloud

This would be our least favourite way to add a font, as it requires you to maintain an additional subscription to continue to have ownership over your branding.

 

However, the font can be added through a CSS URL.

 

If you own the font files, our preferred method is hosting your font on your website.

 

How to host a custom font for Klaviyo on Shopify or Wordpress

This guide includes specific instructions for Shopify. However, the same process applies to Wordpress and WooCommerce websites.

 

Access your Shopify store "Settings" at the bottom of the left-hand menu. Then select "Files".

If you think your custom font may have already been uploaded, search for it before adding new files.

 

To add a new file, you'll want the TTF file of the font. Sometimes all font variations (bold, italics/oblique etc.) are combined under one file. However, many fonts have separate font files for these. You'll need to upload all relevant ones if they're separate.

 

Once uploaded, copy the link of your first font from Shopify files and head to the "import Font" tab in Klaviyo: Images & Brand > Fonts > Import Font

 

  1. Name your font.

  2. Past the Shopify font link into the "Source Address" and clean the link by deleting additional characters after the .ttf

  3. Select the correct font weight and style.

  4. Add all of the additional font variants in the same manner.

  5. Select your Fallback font and save.

Your custom font is now available for use in emails and signup forms.

 

Custom Font FAQs

What happens if I delete a custom font in Klaviyo?

If you delete a custom font still in use, all the places it was used will revert to the fallback font.

 

What if I don't have my Adobe font file?

Many Adobe fonts are available for free download. However, if a font should be paid for and you have never purchased a licence for it, then you shouldn't use it for commercial use. In this case, you might prefer to find a similar free Google Font to use instead.