Hi @Steve0603,

Welcome to the Community! 

This is a great question, and it requires two separate answers for the approaches you would take for custom fonts in email templates and sign-up forms. 

Firstly, though, it is important for me to point out that while you can use Google Fonts, Adobe Typekit, or self-hosted fonts in your emails, only certain email inboxes support custom fonts, and many popular clients (like Gmail and Yahoo) do not. This means that while your fonts may display correctly in your email editor in Klaviyo, the fonts may not display as intended in the recipients’ inboxes due to inbox provider restrictions. Unfortunately, we do not have any control over that from our end or in the Klaviyo platform. 

That being said, here is how you can upload custom fonts to Klaviyo:

Email templates

To add a custom font to an email template: 

1. Open a text block in your template, or your template's Styles tab.
2. In the font dropdown, scroll to the bottom of the list of fonts and click Add Font.
3. In the modal that appears, choose Google Font, Adobe Font, or Upload Font, depending on your font’s source.
4. Follow the instructions in the sections below for your font type (Google, Adobe, or uploaded).

More information can be found here: How to add custom fonts in email templates

Sign-up forms

From the main menu along the left side, navigate to the Content > Images & Brand. From there, click into the Fonts tab. You can add in a Google, Adobe, or Custom-Hosted font. This font then become accessible to use in your sign-up forms from the Editor.

If you’ve already added a font to your email templates, it will be available for all other templates as well as your sign-up forms.

More information can be found here: How to use custom fonts in sign-up forms

--

Hope this helps!

-- Ashley Ismailovski 

Hey @Ashley I. 

Thanks for your quick answer. :)

I followed your process but still couldn’t make it work…

Here’s a quick Loom video to show you : 

Thanks a lot.
Steve.

Hi @Steve0603 ,

So in your particular case, this method for hosting a custom font is not supported with Shopify stores. This is why you are seeing the error message displayed in the Loom recording. 

Instead, you will need to upload a self-hosted font. If the font isn’t already publicly hosted online, download the font that you want to use to your computer. Note that the file must be in WOFF, WOFF2, TTF, EOT, or SVG format to use in Klaviyo. From there:

1. Upload the font to your ecommerce site’s assets. You will need to do this within the code of your site. Here is a guide for how to do this on Shopify
2. Save it

Once you’ve successfully hosted the font, click Import Font in the Add Font modal and paste your hosting URL into the Source address field as shown in your video. Add in your font’s name, weight, and style to the appropriate fields. 

This should resolve the issue you reported. 

-- Ashley Ismailovski

Sorry @Ashley I. but that’s not clear at all…

What do you mean by : “Upload the font to your ecommerce site’s assets” ?

@Steve0603 Here, I am referring to uploading your font files to your Shopify site’s backend per the guide linked here: https://help.shopify.com/en/manual/shopify-admin/productivity-tools/file-uploads#upload-a-file-on-the-files-page

Mmhhh, weird @Ashley I. …

My client sent me this police but it’s still “invalide source adresse” : https://www.lescuistotsmigrateurs.com/cdn/shop/files/Chandelle-Display.otf?v=1629129235

Do you know what’s wrong with it ? 

Thanks.

Steve.

@Steve0603 I found some further documentation here:

To use an imported font, you’ll first need to host the font, either on your servers or using a font-hosting service. Make sure to enable Cross-Origin Resource Sharing (CORS) by setting the Access-Control-Allow-Origin header to *, so the font can be accessed by your recipients’ inboxes. Learn more about CORS. 

You may need to have a developer take a look at these settings to confirm the imported font has CORS enabled