Hello @kmondora,

Thanks for sharing your question with the Klaviyo Community!

Since it sounds like you own a custom font, can you confirm if you’ve hosted the font anywhere yet? Because custom fonts are not hosted by a third-party source, you would need to host the font yourself either in your site’s assets or a font hosting platform in order to generate a shareable URL that can be accessed by platforms such as Klaviyo. Once hosted, also keep in mind that the Cross-Origin Resource Sharing (CORS) setting must be enabled by setting the Access-Control-Allow-Origin header to * in order for to be accessed. 

If you were looking to use this custom font in a signup form, I would recommend reviewing the Adding Custom Fonts to the Form Builder - Adding a Custom Font subsection of the Custom Fonts in Signup Forms article. For instructions on how to use a custom font in an email template, I suggest taking a look at the Add a Self-Hosted Custom Font to Your Template subsection of the How to Add Custom Fonts in Email Templates article. 

I’ve also linked other Community posts that may prove helpful in using custom fonts are:

Thanks for being a member of the Klaviyo Community!

David

Thanks David. I’ll look into this now. I appreciate you taking the time! I’m only in day 3 and Klaviyo is very impressive!

our hosting thinks that setting the CORS policy to * is too permissive - can there be a more specific setting?

Hey @moorka,

Unfortunately, outside of setting the Access-Control-Allow-Origin header to * there isn’t a more specific allowlist setting in order to offer Klaviyo access to those font files. Typically using a wildcard is safe to add to a resource, unless that resource contains private or sensitive data. Since the resource is only a custom font, I don’t see why it would be considered too permissive unless the fonts are hosted alongside other sensitive data through your hosting provider. 

If this was the case, then I would highly recommend re-evaluating how you’re hosting these font files. 

David

@David To 

Please could you explain how I set the Access-Control-Allow-Origin header to * ?

Is this something I should do with me website host?

I’ve followed all the steps to add another custom font but keep getting the same error message (see screen grab).

Please help.

Thanks in advance

Kaysha

Hey @Kaysha,

Setting the Access-Control-Allow-Origin header to * would need to be adjusted from where you’re hosting the font - either on your own servers or using a font-hosting service.

You can learn more about CORS and how to change its header from Mozilla’s Cross-Origin Resource Sharing (CORS) Developer Resource. If you need more hands on assistance on making these changes, I would highly recommend reaching out to one of our many Klaviyo Partners that excel at development work. 

David