Solved

Custom Fonts - One or more font files could not be accessed


Badge +2

Hey just after some help with installing custom fonts.

 

Using the font URL off my website - www.domain.cometc/wp-content/uploads/2021/02/Gilroy-Regular.ttf  (not the actual link wasn't sure if I'm suppose to include website links or not)

The file format is ttf, works/displays on site. is there something i’m missing here?

 

Cheers,

icon

Best answer by David To 6 May 2021, 18:39

View original

3 replies

Badge +2

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

Userlevel 7
Badge +60

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

 

Userlevel 7
Badge +60

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

Reply