Hey there.
So my client is using a font on his e-shop that doesn’t exist in Klaviyo nor Google Font.
I’m wondering how can I import a font to be able to match his website font and the font on the pop-up ?
I’ve tried to look up a few tutoriels but all of them focus on Google Font or Adobe Font, but none on actually how import font.
Thanks for your help.
Steve
Solved
Importing font from my website
Best answer by Ashley I.
Hi
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:
- Open a text block in your template, or your template's Styles tab.
- In the font dropdown, scroll to the bottom of the list of fonts and click Add Font.
- In the modal that appears, choose Google Font, Adobe Font, or Upload Font, depending on your font’s source.
- 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
+39Hi
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:
- Open a text block in your template, or your template's Styles tab.
- In the font dropdown, scroll to the bottom of the list of fonts and click Add Font.
- In the modal that appears, choose Google Font, Adobe Font, or Upload Font, depending on your font’s source.
- 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
Ashley Ismailovski, Klaviyo Champion & Director of Email Marketing at SmartSites https://www.smartsites.com/
Hey
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.
+39Hi
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:
- 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
- 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
What do you mean by : “Upload the font to your ecommerce site’s assets” ?
+39Mmhhh, weird
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.
+39To 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
Reply
Rich Text Editor, editor1
Editor toolbars
Press ALT 0 for help
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.