Hello @mishavee,
Since it sounds like you are hosting your own custom font and receiving an error of “One or more font files could not be accessed”. This type of error message indicates an accessibility issue due to CORS security.
Can you confirm if you’ve enabled the Cross-Origin Resource Sharing with the Access-Control-Allow-Origin
header to *
as instructed in the Add a Self-Hosted Custom Font to Your Template subsection of the How to Add Custom Fonts in Email Templates article?
Ensuring that this header is applied to your site allows the custom font to be accessed successfully by your recipients’ inboxes.
If this setting is not enabled and the header is not applied, I would recommend reaching out to your site developer to enable this header and referencing both Klaviyo’s Custom Fonts article and the following CORS document: Cross-Origin Resource Sharing (CORS)
Thanks for being a part of our Klaviyo Community!
-David
Hello @mishavee,
Since it sounds like you are hosting your own custom font and receiving an error of “One or more font files could not be accessed”. This type of error message indicates an accessibility issue due to CORS security.
Can you confirm if you’ve enabled the Cross-Origin Resource Sharing with the Access-Control-Allow-Origin
header to *
as instructed in the Add a Self-Hosted Custom Font to Your Template subsection of the How to Add Custom Fonts in Email Templates article?
Ensuring that this header is applied to your site allows the custom font to be accessed successfully by your recipients’ inboxes.
If this setting is not enabled and the header is not applied, I would recommend reaching out to your site developer to enable this header and referencing both Klaviyo’s Custom Fonts article and the following CORS document: Cross-Origin Resource Sharing (CORS)
Thanks for being a part of our Klaviyo Community!
-David
Helps when you skip an important line of instructions. Thanks for that David, you where correct i had not included Access-Control-Allow-Origin
.
I did have one follow up question regarding best practice when implementing of variations of the same font family. i.e Gilroy - regular, think, bold etc.
I have followed the instructions: https://help.klaviyo.com/hc/en-us/articles/115005256008-How-to-Add-Custom-Fonts-in-Email-Templates#add-a-self-hosted-custom-font-to-your-template5
adding in the Gilroy font, but as i was planning to use three types (regular, thin and extra bold) would i copy this section three times over with the seperate URL? or follow:https://help.klaviyo.com/hc/en-us/articles/115005256008-How-to-Add-Custom-Fonts-in-Email-Templates#add-a-self-hosted-custom-font-to-your-template5 and rather create three seperate font names.
Cheers
Hey @mishavee,
Great question!
This would depend on the font file you uploaded.
If the font file included each font weight then you should be able to use one import and then dictate the font weight through CSS such as bolding words you want heavier.
If the font file you uploaded only included one font weight (only included 'regular' for example) then each of the font weight's from different font files would need to be hosted & imported to be accessed. Klaviyo supports the use of multiple custom fonts in a singular template, in this case the same font but with different font weights. There is also a similar Community post about using multiple custom fonts which you can follow along here:
-David