CODEWITHSUNDEEP
htmlcsscors
MarijnS95
MarijnS95

Reputation: 4793

same origin restriction blocking font from same origin

This website uses a font hosted on the same origin (http://www.spintires.com/assets/landing/css/communist.ttf). However, Chrome reports that they are considering blocking cross origin fonts, and firefox already blocks it.

Webkit throws this error:

Blink is considering rejecting non spec-compliant cross-origin web font requests: http://www.spintires.com/assets/landing/css/communist.ttf.
Please use Access-Control-Allow-Origin to make these requests spec-compliant.

I do not have any access to the server, and I am not asking this to fix the problem (although I might report a solution to the crew) but this is more for educational purposes, as I have no idea why this resource is blocked, because the headers look almost exactly the same to the ones of a picture and the html document, and the origin is the same.

Another thing I noticed was that Chrome loads the file unsuccessfully and requests a partial content after that (and right now it also does a full request after the first one failing).

TL;DR;
Why do browsers report/block the loading of a font file which originates from a seemingly the 'same' origin?

Upvotes: 3

Views: 8802

Answers (3)

Felipe Brahm
Felipe Brahm

Reputation: 3160

It is not the same origin. You're loading spintires.com and the web font is hosted on www.spintires.com. Those are different origins (even though they point to the same place).

You can verify this by opening www.spintires.com instead of spintires.com (only the second one will throw the error).

Upvotes: 3

Aiswarjya
Aiswarjya

Reputation: 217

Currently, serving webfonts from AWS likely won't work in Firefox and IE 9+ because AWS doesn't support the Access-Control-Origin-Header. See this post on the AWS forums. Seems to be a problem for a lot of people.

As an alternative to AWS, Google's cloud services support cross-origin file serving. I just set up a bucket to serve webfonts, and it seems to be working. See this blog post and the documentation for more info.

Upvotes: 3

Aiswarjya
Aiswarjya

Reputation: 217

Download this file communist.ttf and put it on your server.

Upvotes: 2

Related Questions