Skip to main content
Solved

Custom Fonts // CORS works


Forum|alt.badge.img+1

Hi there,

 

I’ve seen there are a ton of “can’t add my custom font” posts. Sorry to post another one.

It looks like the solution for pretty much all of them was related to CORS and setting an access control policy.

So I have set that up and verified it works. 

 

When I curl my font with Klaviyo as Origin I get a success response and can download the font-file.

curl -v --request GET 'https://mydomain.com/path/to/my/font.woff2' --header 'ORIGIN: https://klaviyo.com'



> Host: mydomain.com
> User-Agent: curl/8.6.0
> Accept: */*
> ORIGIN: https://klaviyo.com
> 
{ [5 bytes data]
* TLSv1.3 (IN), TLS handshake, Newsession Ticket (4):
{ [281 bytes data]
* TLSv1.3 (IN), TLS handshake, Newsession Ticket (4):
{ [281 bytes data]
* old SSL session ID is stale, removing
{ [5 bytes data]
< HTTP/1.1 200 OK
< Date: Wed, 26 Jun 2024 14:33:30 GMT
< Server: Apache/2.4.59 (Debian)
< Last-Modified: Mon, 25 Mar 2024 15:54:20 GMT
< ETag: "16074-6147e2fc5fcb6"
< Accept-Ranges: bytes
< Content-Length: 90228
< Content-Type: font/woff2

 

On Klaviyo I still get the error “One or more font files could not be accessed.”

 

Running Shopware 6 on an Apache2 webserver. This is my access control policy in my .htaccess in public root directory:

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

 

Any suggestions?
More insight on the error would also be helpful if anyone from Kalviyo Staff is able to provide it.

 

Thanks!

Nico

Best answer by Kim Strauch

Hey @CP-Nico, I believe your CORS headers setup is incorrect. You get a 200 in CURL but this is not indicative of how a browser would behave. 

The easiest way to verify that you have a CORS issue is to call “fetch(URL)” in the browser dev tools. I've posted a screenshot to demonstrate that I am seeing a CORS error in trying to load this font URL from a browser.

It appears your server is not setting the  Access-Control-Allow-Origin response header properly, so the problem must lie somewhere in your Apache/htaccess setup. 

 

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

9 replies

Forum|alt.badge.img+31
  • Partner
  • 252 replies
  • June 27, 2024

Hello @CP-Nico Could you please share the screenshot of the error?


Forum|alt.badge.img+1
  • Author
  • Contributor III
  • 6 replies
  • June 27, 2024

Hey @Maxbuzz, here you go:

 


Forum|alt.badge.img+31
  • Partner
  • 252 replies
  • June 27, 2024

Hello @CP-Nico  if possible could you please share the Font URL here or in messages?


Forum|alt.badge.img+1
  • Author
  • Contributor III
  • 6 replies
  • June 27, 2024

Kim Strauch
Klaviyo Employee
Forum|alt.badge.img+9
  • Klaviyo Employee
  • 91 replies
  • Answer
  • June 28, 2024

Hey @CP-Nico, I believe your CORS headers setup is incorrect. You get a 200 in CURL but this is not indicative of how a browser would behave. 

The easiest way to verify that you have a CORS issue is to call “fetch(URL)” in the browser dev tools. I've posted a screenshot to demonstrate that I am seeing a CORS error in trying to load this font URL from a browser.

It appears your server is not setting the  Access-Control-Allow-Origin response header properly, so the problem must lie somewhere in your Apache/htaccess setup. 

 


Forum|alt.badge.img+31
  • Partner
  • 252 replies
  • June 28, 2024

Hello @CP-Nico If you are not able to make it work with .htaccess then I would suggest to create a s3 bucket on AWS tier and enable CROS there. It is less technical and easy to work with.


Forum|alt.badge.img+1
  • Author
  • Contributor III
  • 6 replies
  • June 29, 2024

Cheers guys @Kim Strauch @Maxbuzz. I’ll investigate tomorrow an update here once (hopefully) successful.


Forum|alt.badge.img+1
  • Author
  • Contributor III
  • 6 replies
  • June 30, 2024

So turns out I hadn’t enabled the apache mod headers for my .htaccess directive to actually do anything. Rookie error. Works now.

Thanks again @Maxbuzz and @Kim Strauch !


Kim Strauch
Klaviyo Employee
Forum|alt.badge.img+9
  • Klaviyo Employee
  • 91 replies
  • July 1, 2024

@CP-Nico glad you got that sorted out!