Skip to main content
Solved

Importing Fonts Error


Forum|alt.badge.img+1

Hi,

We are trying to import the below font  but get an error “one or more font files cannot be accessed..”

 

https://artisansofdevizes.com/static/version1689767617/frontend/WilliamsCommerce/sarsen/en_US/fonts/butler/regular/Butler.woff2

 

Our Development team have checked and say the font is is not restricted and or locked down and should be available to import.

 

I would like to sense check that there is nothing wrong with the file we are trying to import and if anyone has had the same issue and found a way around it? 

 

Many Thanks,

 

Best answer by Brian Turcotte

Hi @SSG NB!

 

First, I would ensure that you are following the steps outlined in our Help Center article:
 

Imported fonts, sometimes called self-hosted fonts, are recommended only for senders who have access to a developer. To 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. 

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. Add in your font’s name, weight, and style to the appropriate fields. 

Finally, choose a fallback font and click Add Font.

 

The step that is often forgotten is to enable CORS, as mentioned in this Community post:

 

I hope this helps, and thanks for using the Community!

 

Best,

Brian

View original
Did this topic or the replies in the thread help you find an answer to your question?

2 replies

Brian Turcotte
Forum|alt.badge.img+37

Hi @SSG NB!

 

First, I would ensure that you are following the steps outlined in our Help Center article:
 

Imported fonts, sometimes called self-hosted fonts, are recommended only for senders who have access to a developer. To 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. 

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. Add in your font’s name, weight, and style to the appropriate fields. 

Finally, choose a fallback font and click Add Font.

 

The step that is often forgotten is to enable CORS, as mentioned in this Community post:

 

I hope this helps, and thanks for using the Community!

 

Best,

Brian


Forum|alt.badge.img
  • Contributor I
  • 1 reply
  • February 14, 2024

Using a wildcard would trust all domains and this could be dangerous - can we use a source instead?

e.g. Header always set Access-Control-Allow-Origin "https://example.com”

but what would the source URL for Klaviyo be?