Spice Up Your Emails: A Guide to Custom Fonts in Klaviyo

Ever felt like your emails are just a tad too bland? Like they’re missing that special something to make them stand out in a sea of Arial and Times New Roman? Well, you’re in luck! In this post, we'll be exploring custom fonts in Klaviyo and giving you all the tips and tricks you need to make your fancy fonts shine.

Why Custom Fonts Are Great

Custom fonts are like the cherry on top of a sundae, the sprinkles on your donut, the... well, you get the idea. They add personality, brand consistency, and a dash of pizzazz to your emails and signup forms. Instead of sticking with the usual suspects, you can choose a font that truly represents your brand's voice.

How to Add a Custom Font to a Klaviyo Email

When it comes to adding custom fonts in Klaviyo, you’ve got options! Here are the four main methods:

1. Google Fonts
2. Adobe Fonts
3. Self-Hosted Fonts
4. Klaviyo-Hosted Fonts

Let's break down each method:

1. Google Fonts

Google Fonts is a free and easy-to-use option. Here’s how you can add a Google Font to your Klaviyo email or signup form:

1. Choose Your Font: In Klaviyo, head over to Content > Images & brand, then click on the Fonts tab. With the Google Fonts option selection, open the dropdown and choose your desired font.
2. Font Variants: Choose the font varaints you wish to use, only select the ones you know you will use, too many can lead to increased email load times.
3. Fallback Font: Choose a fallback font which will be used in lieu of your custom font when the custom font is unable to load.
4. Save: Hit Add font to save your selections.
5. Embed the Font: Go to your email or sign-up form and highlight your text and use the font toolbar to apply your custom font.

2. Adobe Fonts

If you’re an Adobe Fonts user, here’s how to integrate those fonts into Klaviyo:

1. Choose Your Font: Go to Adobe Fonts and pick your font.
2. Add to Web project: Once you've chosen your font, click </> Add to Web Project at the top of the page.
3. Style Options: In the popup that displays, choose your desired font weights and styles. The click Create/Save.
4. Grab the CSS address : From the embed code that appears, copy the a href link without the .css extension, see example below, the text in bold is what you copy:

   <link rel="stylesheet" href="https://use.typekit.net/bgthujy.css">

5. Add to Klaviyo: In Klaviyo, navigate to Content > Images & brand > Fonts > Adobe Fonts, paste the code you just copied into the field and click Continue. If your URL is valid you will see the following options where you can select your fallback fonts:



6. Apply Your Font: After choosing your fallback fonts, head to an email template or sign-up form, select your text and use the font toolbar to apply your custom font.

3. Self-Hosted Fonts

For custom fonts not hosted on Google or Adobe, you can import your own self-hosted font.

1. Host Your Font: Upload your font file to a server where they can be accessed via URL. Normally, the best place to host your font is within your site's assets.
2. Font Format: To use your custom font in Klaviyo, make sure your file is an accepted format (WOFF, WOFF2, TTF, EOT, or SVG)
3. Add to Klaviyo: Once you've found a place to host your font and uploaded a font file in an accepted format, grab the URL and head to Klaviyo > Content > Images & brand > Fonts
4. Import Font. Enter a name for your font, paste the URL in the Source Address field, choose your desired font variants/styles, select a fallback font, and click Add font.
5. Apply your Font: Go to an email template or sign-up form, highlight your text and use the font toolbar to apply your custom font.

4. Klaviyo-Hosted Fonts

Klaviyo also hosts a small selection of custom fonts that you can use. Adding a klaviyo-hosted font is similar to the self-hosted method, but here's how to do it:

1. Choose a Font: Go to this page, and choose a font from the list provided. At the time of writing this, there are just 8 fonts to choose from (c'mon Klaviyo, you can do better than that). Copy the name of the font you want to use.
2. Add to Klaviyo: Go to Content > Images & brand > Fonts > Import Font, paste the font name in the first field, then copy-paste the source address for each of the desired styles you want. Select a fallback font then click Add font. See example below:



3. Apply your font: Go to an email template or sign-up form, highlight your text, and use the font toolbar to apply your custom font.

Custom Font Compatibility Across Email Clients

Not all email clients are created equal when it comes to font support. Here’s a handy table to help you navigate this:

Email Client	Custom Font Support	Fallback Font Support
Apple Mail	Yes	Yes
Gmail (Web)	Yes (Limited)	Yes
Gmail (Mobile)	Yes	Yes
Outlook (Web)	No	Yes
Outlook (Desktop)	No	Yes
Yahoo Mail	No	Yes

Why Isn’t My Custom Font Working?

So you followed all the steps, but your custom font still isn’t showing up. Here are a few possible culprits:

1. Not Styling the Text: Double-check that you’ve actually applied the custom font to your text.
2. Hosting Issues: Make sure the font URL is correct and the font is accessible.
3. Email Client Compatibility: Some clients just won’t display custom fonts. Ensure you’ve set up a fallback font.

Custom Font Best Practices

To ensure your custom fonts look fabulous and function flawlessly, keep these best practices in mind:

1. Fallback Fonts: Always specify a fallback font. We suggest choosing a fallback font which is similar to your custom font.
2. Readability: Choose fonts that are easy to read. Fancy fonts are fun, but clarity is key.
3. Load Times: Custom fonts can slow down load times. Choose lightweight fonts and avoid loading too many different styles.
4. Stay on Brand: Use the same font(s) on your website, emails, and sign-up forms to maintain a consistent brand feel.

From Meh to Marvellous

Custom fonts are an easy way to elevate your Klaviyo emails and sign-up forms from meh to marvellous. With just a few steps, you can infuse your brand's unique style and give your emails that extra flair they deserve!