Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CORS Issue with woff2 fonts behind CDN in Chrome

I have an S3 Bucket fronted with a Cloudfront CDN. In that bucket, I have some woff2 fonts that were automatically tagged with the content type octet-stream. When trying to load that font from a CSS file on a live production website, I get the following error:

Access to Font at 'https://cdn.example.com/fonts/my-font.woff2' from origin 
'https://www.live-website.com' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'https://www.live-website.com' is therefore not allowed access.

The thing is that a curl reveals that the Access-Control-Allow-Origin is present:

HTTP/1.1 200 OK
Content-Type: binary/octet-stream
Content-Length: 98488
Connection: keep-alive
Date: Wed, 08 Aug 2018 19:43:01 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Last-Modified: Mon, 14 Aug 2017 14:57:06 GMT
ETag: "<redacted>"
Accept-Ranges: bytes
Server: AmazonS3
Age: 84847
X-Cache: Hit from cloudfront
Via: 1.1 <redacted>
X-Amz-Cf-Id: <redacted>

Everything is working fine in Firefox, so I guess that Chrome is doing an extra validation that blocks my font.

like image 888
prichrd Avatar asked Oct 19 '18 13:10

prichrd


People also ask

What are WOFF2 files?

WOFF (and its successor WOFF2) are compressed file formats created specifically for web fonts. Although regular OpenType fonts (TTF and OTF files) can be used as web fonts, such usage is not recommended as it usually contravenes license agreements—and the files are significantly larger.


1 Answers

Turns out that the problem was actually with the Content-Type. As soon as I changed the content type to application/font-woff2 and invalidated the cache of these woff2 files, everything went through smoothly.

like image 107
prichrd Avatar answered Sep 20 '22 22:09

prichrd