Custom Fonts // CORS works

Forum|Forum|2 years ago
June 26, 2024
9 replies
448 views

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

This topic has been closed for replies.

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.

M

Maxbuzz

Partner

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

https://theforms.pro

C

CP-NicoAuthor

Active Contributor I

Hey @Maxbuzz, here you go:

M

Maxbuzz

Partner

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

https://theforms.pro

C

CP-NicoAuthor

Active Contributor I

@Maxbuzz Yeah I suppose so, why not:

https://chicpea.de/bundles/chicpeacerealchild/fonts/sketchnote-square/webFonts/SketchnoteSquare/font.woff2

Kim StrauchAnswer

Klaviyo Employee

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.

M

Maxbuzz

Partner

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.

https://theforms.pro