Klaviyo Custom Fonts – A How to Guide for Adding and Using Them in Emails

Ryan Turner // August 16 // 0 Comments

This is an easy to follow step-by-step guide to implementing Klaviyo custom fonts – the pros and cons – and why it’s sometimes best to use regular fonts.

Grab a mug of coffee. Let’s dive in!

What are custom fonts in Klaviyo?

Email marketing is a major revenue source and one of the best channels to stay connected with customers for an Ecommerce business.

Every brand has its branding kit and guidelines, and some have their own awesome-looking fonts. Using branding kit fonts across all Ecommerce marketing channels creates a consistent brand experience and arguably higher perceived value. 

Similarly, adding custom fonts in Klaviyo enhances the look and feel of your email messaging and allows everything to be congruent cross-channel.

If you’re bored of regular fonts or want your emails to look a little more “higher end”, let’s see how you can use third-party custom fonts for your email templates in Klaviyo.

Inbox providers that support custom fonts:

Before using Google fonts, Adobe fonts, or any third-party custom fonts, you must know your subscribers and the inbox providers they’re using. 

Make sure their inbox providers support custom fonts.

Here is a list of inbox providers that do support custom fonts:

1) Apple mail

2) iOS mail

3) Google Android

4) Samsung mail (Android 8.0)

5) Outlook (for Mac OS)

6) Outlook (for iOS App)

Of course most users will be using a service on that list, but it is important to know that your custom font isn’t always going to work for every user in every situation.

That’s what fallback fonts are for.

What is a fallback font in Klaviyo?

Now that you’re all excited to ditch Klaviyo’s default fonts and jump to custom fonts, you should know that selecting a fallback font (web-safe font) is considered a best practice by Klaviyo and for email marketing in general, on any platform.

A fallback web-safe font added to your Klaviyo email template can save you a lot of hassle.

If the email client of your reader doesn’t support your custom fonts, the fallback font would work as a backup and take its place in the email template with the fallback font family.

Common fonts on different devices.
Support of some common fonts.

In the above image, you can look at a few fallback web-safe fonts and compare how they perform with different operating systems.

Now if you’re thinking, “What are web-safe fonts?”. Well, they’re the basic pre-installed fonts on different operating systems like Windows or Mac OS, iOS, and Android and are supported by almost every email client.

How to add Google fonts to your email template:

1) To find your favorite Google font go to https://fonts.google.com/

2) Choose your font family by clicking select this style

Google fonts website
Google fonts website.

3) Click on Import

4) Copy the import code i.e <style>
@import URL(‘”>https://fonts.googleapis.com/css2?family=Poppins&display=swap’);
</style>

5) Go to the Klaviyo dashboard

6) Click on templates

7) Choose the template

8) Edit the first text block

9) Click the source code

10) Assign according to your h1, h2, h3, paragraphs, texts, and bullets.

11) The entire snippet code should look like this

<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>

12) Add this to the first text block. All the other blocks will automatically include your custom font.

In the end, do not forget to save the block.

How to add Adobe fonts to a Klaviyo email template

The process of adding Adobe fonts is the same as adding Google fonts, just use the Adobe library here: https://fonts.adobe.com/fonts

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

Klaviyo has a step-by-step here if you need further Adobe instructions.

What are the benefits of using custom fonts?

1) Consistent branding experience.

2) Makes your emails stand out.

3) Matches the look and feel of your Ecommerce store.

4) Good-looking emails build more trust for higher end products.

5) Creates a stronger, more recognizable, and more premium brand image in the minds of your customers and prospects.

What are the disadvantages of using custom fonts?

1) Some browsers don’t support them.

2) Not all inbox providers like custom fonts.

3) Custom fonts may not render smoothly on all devices or screen sizes.

4) You must add custom font codes manually in the Klaviyo template.

5) Custom fonts are not supported in product, button, or header/link blocks.

6) Some heavy fonts can delay the email load time.

If you need help with any aspect of email template design, campaign planning, or execution, contact our team at EcommerceIntelligence.com. We also have an in-depth course you can check out.

Custom Font FAQs:

Are these custom fonts free?

Some of them are free, (especially Google fonts).

Can I use self-hosted fonts?

Of course, you may host the font files on Klaviyo and use them.

What if my fonts aren’t correctly visible on selected devices and email providers?

As we already mentioned, fallback font is the solution. (use a web-safe font)

Can I use multiple custom fonts?

Yes! But, using more than 2-3 fonts will impact email load time.

What if I don’t have any fall-back web-safe fonts?

Don’t worry! All the Klaviyo fonts are already web-safe and can be used as a fallback font.

How about using custom texts on images and creating all image templates?

This is an option some brands use, but we see the best results with templates that use a mix of images and text. However, feel free to test this if you have the design resources and see how the deliverability looks with your lists.

How do I know that my custom font is working?

Before you send out the campaign, send a few tests and check them on multiple devices. If you’re happy with how the email looks, send it to your customers.

Does Gmail support custom fonts?

Gmail supports only two custom fonts. Roboto and Open Sans.

Why are some of the pre-installed Klaviyo fonts not visible in my test?

Century Gothic, Tahoma, and Apple Black; these three fonts aren’t supported on some devices. This is because they do not come pre-installed on iOS devices. If you’re using any of these three fonts, they may appear as the default inbox font.

What are the supported formats for self-hosted custom fonts?

Supported formats include WOFF, WOFF2, TTF, EOT, and SVG. 

About the Author Ryan Turner

Ryan Turner is the lead strategist here at EcommerceIntelligence.com with over 6 years experience growing Ecommerce brands using proven Klaviyo email marketing strategies.