same origin restriction blocking font from same origin

Question

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?

Answer 1

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).

Answer 2

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.