The complete guide to using custom fonts with Klaviyo

Fonts are an integral part of your brand experience. The font choice you make says so much about your business, your aesthetic and what you stand for.

Once you have chosen the perfect font, you ideally want to use it across all forms of communication with customers, including emails sent through Klaviyo. This will ensure a consistent brand experience, no matter which channel you reach your customers on.

As you may have already realized, however, the range of Klaviyo’s default fonts is limited, so you may not find the same font that you use on your website.

If this is the case, worry not.

In this article, we’ll run you through the steps required to use custom web fonts in Klaviyo.

We’ll cover:

• Why you should use web custom fonts.
• The problems with using them.
• How you can get around this issue.

And

• How to use both self-hosted web custom fonts and Google fonts in Klaviyo.

Shall we get started?

First up, let’s begin with a brief overview of font types

Put simply, there are 2 different types of fonts to choose from when designing emails: web safe fonts and web fonts.

Web safe fonts are the default (…did someone say boring?….) fonts that email marketing platforms like Klaviyo provide. They’re the fonts you’re probably most familiar with, including Arial, Courier, Georgia, Times New Roman and so on. They’re the default fonts used by most email clients and operating systems.

Your website, on the other hand, likely has a custom font that you’re (perhaps unknowingly) licensing through Adobe Typekit or Google Fonts.

One of the challenges this poses is that it can be difficult to align your website fonts with those you use in your email communication.

Why use web custom fonts in emails?

Using web custom fonts over web safe fonts in your email communication with customers has a number of advantages.

1. They provide a consistent brand experience

Fonts play a large part in a company’s branding.

Many brands are associated with a particular font. For example, think about the font of the phrase “Just do it.” on the Nike logo – no other font than the Nike font will do (It’s Futura Condensed Extra Black, in case you’re wondering).

If you use custom fonts on your website or other branding materials and want to make sure that the same brand experience is reflected in your emails, you need to use web custom fonts.

2. They let you match the look and feel of your store

Even if your brand isn’t associated with a particular font, using the same font in your emails as you use on your website will provide customers with a more consistent brand experience. This can help remind customers about your brand, which could be especially important if your company is not yet that well known.

3. They allow you to be more creative with your email design

Having a greater array of fonts to choose from allows you to be more creative when designing your emails. You’ll be able to select the exact font that fits the message of your mail and looks great in your design.

The caveat with web custom fonts

Unfortunately, there is one major downside to using web custom fonts in your emails: not all email clients support them.

Yahoo doesn’t support web fonts at all. As for Gmail – only 2 web fonts will display correctly: ‘Roboto’ and ‘Google Sans’, which look like this:

This means if you use web custom fonts in your emails, a non-negligible portion of your customers may not receive the email as you intended.

However, many popular email clients do support web fonts. Here is a list of those that do:

• Apple Mail
• iOS Mail
• Google Android (not the Gmail app)
• Samsung Mail (Android 8.0)
• Outlook for Mac
• Outlook App
• Thunderbird

Though it requires some knowledge of CSS to integrate web fonts into your Klaviyo email campaigns, it’s totally worth the effort if you know that your emails are largely opened on Apple devices. You can easily find this information in your Klaviyo campaign report data, as seen below:

Include fallback fonts, always

Even if many of your customers don’t use Apple devices, it doesn’t mean you shouldn’t use web custom fonts. One option you have is to choose a web safe font that your email will use as a backup in case the recipient’s email client doesn’t support custom fonts.

You can do this by adding extra fonts to the CSS code in your email.

Think of this as a prioritized list of preferred fonts. When the email client sees the code, if it can’t display the first font in the list, it will move on to the second one. It is even possible to add a third font for the occasions when neither of the firsts two fonts are supported.

While using this method will not result in a consistent email experience for all your customers, it will still give you some control over the design of your emails in instances when your main font is not supported.

Let’s take a look at this in action. Normally, your font selection code will look like the code below.

First, you have the priority font you want to use where possible – in this case, Montserrat. This is followed by the web safe font, “Verdana” and finally “sans-serif.”

Using the above font-family stack, Gmail will ignore the first font in the list as it’s a web font that’s not supported in Gmail, and the font rendered in the email will be Verdana.

If Verdana isn’t supported on the device used (which is unlikely, as Verdana is a web safe font), the device would use the default sans-serif font for its system, as this is the third font in the list.

When choosing a backup font, you should be sure it will fit into the design of your email. In order to do this, you could use a tool like this font style matcher.

Finally, if your custom font has more than one word in its name, remember that it should be in brackets.

How to use self-hosted web fonts with Klaviyo

And so, without further ado – let’s take a look at 2 methods to use custom fonts with your Klaviyo emails:

1. Self-hosted custom fonts
2. Google Fonts

Self-hosted custom fonts

It is still possible to use web custom fonts in your Klaviyo emails. However, as Klaviyo doesn’t host fonts, you’ll need to host them elsewhere. This process requires a bit of manual work but it’s perfectly suited if you want to use Klaviyo to design your Shopify transactional emails.

Here are the steps you should take to use custom fonts in Klaviyo emails.

1. For maximum compatibility, you’ll first need to convert your original font file into four different formats. These are:

• .eot for Internet Explorer users
• .woff for modern browsers
• .ttf for Apple devices
• .svg for old versions of iOS

You can convert fonts using this online font converter, or this one.

2. Next, you need to upload these converted files to a site that will host them. If your ecommerce store is hosted on Shopify you can upload the fonts to its files page and host them there. Once this is done, you’ll get a link to each of the files, as shown below:

3. You’ll then need to customize the following code with information about the custom font you want to use. You should first switch out the links in the snippet for the relevant link to your self-hosted font.

Then you need to replace all the references to “Oswald” with your own custom font information.

4. Once you’ve added all the correct information to the code above, you can add it to the source code of the first text block in your Klaviyo email template.

The changes should then be reflected in the Klaviyo email builder.

How to use Google fonts with Klaviyo

The other option to add custom fonts to Klaviyo is to use Google fonts.

This option is much quicker and requires less effort than the previous method, but it’s also less robust – particularly if you plan to design your Shopify transactional emails with the Klaviyo Template Editor before exporting these into Shopify.

For this option, you don’t have to go through the process of self-hosting the fonts. Instead, you just need to add some code from Google into the Klaviyo editor by taking the following steps.

1. Search for the Google font you want to use by using this link.

2. Once you have the font you want, click on the font and then click the Select This Font button on the upper right. This will minimize a window at the bottom of your screen.

3. In the embed tab, click “@IMPORT” and copy the URL (not the whole code).

4. Add the URL to this HTML snippet in place of “INSERT_FONT_URL”:

5. Head to the Klaviyo template and open the first text block in your email. Click the source button to view the raw HTML and add the above code. Once you save it, the changes will be reflected in the editor.

How to use web custom fonts on your buttons

Unfortunately, even with all the workarounds in the world – Klaviyo still doesn’t support web fonts in its buttons.

However, you can hack around this by using plain HTML code to create your own hardcoded button within a text block.

Here’s how.

First, you’ll have to generate code for an HTML button. You can use this tool to easily create the code you need for a customized button. Just select the colors you want to use in the button along with its dimensions in the easy-to-use code generator.

This will generate some HTML code for a button. You can then update this code with the font you want to use, as well as your backup fonts, like this example below that uses a custom web font followed by Google Sans and Arial as a fallback:

Then, just paste the code into a Klaviyo text block.

Recommendations when using custom fonts in email

Before you go out and begin sending emails using custom fonts, there are some tips you should follow.

• Make sure to use fallback fonts. This means that when your preferred font isn’t supported by the recipient’s email client, you’ll be in control of the font that’s switched in.
• Ideally, you want to make sure that you’re using a fallback font that aligns closely with your brand font, and that fits into the design of your email.
• When choosing fonts, keep the number you use to a minimum. Two fonts are usually enough. Any more and your emails may start to look cluttered and unprofessional.
• Additionally, the fonts you use should complement each other. Avoid using fonts with drastically different letter widths.
• Don’t use fonts that are difficult to read. Handwritten fonts can be especially problematic.
• ALWAYS test how your emails look before sending them out. As well as the Klaviyo preview, you should send test emails and open them on different clients and devices to see if there are any issues. An email testing tool like Litmus can help with this.

Time to wrap up

As long as you’re willing to put a little bit of work in, using web custom fonts in Klaviyo is a simple – and very doable – process.

This allows you to customize your emails to a much greater degree than if you just use standard web fonts, enabling you to create a much more consistent customer experience across all your media.

If you’re using custom fonts on your website, why not give them a go in your emails too?