Adding custom font does not work

Question

Hi there, I am trying to import a custom font (Avenir Next Rounded Pro) to Klaviyo, but always get the error message “One or more font files could not be accessed”. I have uploaded the font files (WOFF, WOFF2, EOT, TTF, OTF, SVG) under “Files” in Shopify and used the public URL as the source address.And cannot figure out what the problem is. More info on the topic that might be helpful:It is a store that is still password protected. I thought that this might be the problem. However, I tried the same procedure with a store that is not password protected and it didn’t work as well. Thanks for your help in advance!Hendrik

stephen.trumble · Accepted Answer

Hey@NextLevelHappy to help with your custom font! This type of error message indicates that the file cannot be downloaded due to CORS security. In which case Klaviyo is unable to access the Font on your Server thus having an issue. To resolve this CORS security issue you would need to add headers to the site to ensure that the font can be accessed successfully as described in the following guideHow to addcustomfontsin email templates.When you are hosting your own fonts on your own servers, you need to enable Cross-Origin Resource Sharing with the "Access-Control-Allow-Origin" header. More on CORS can be found herehttps://developer.mozilla.org/en-US/docs/Web/HTTP/CORS).Hope this helps! Thanks for being an active part of the Klaviyo Community!

Adam B · Answer

Hey@NextLevelHappy to help with your custom font! This type of error message indicates that the file cannot be downloaded due to CORS security. In which case Klaviyo is unable to access the Font on your Server thus having an issue. To resolve this CORS security issue you would need to add headers to the site to ensure that the font can be accessed successfully as described in the following guideHow to addcustomfontsin email templates.When you are hosting your own fonts on your own servers, you need to enable Cross-Origin Resource Sharing with the "Access-Control-Allow-Origin" header. More on CORS can be found herehttps://developer.mozilla.org/en-US/docs/Web/HTTP/CORS).Hope this helps! Thanks for being an active part of the Klaviyo Community!Hey Stephen,Can you give an updated link to the guide you mentioned?

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials