How can I fix the 'Missing Cross-Origin Resource Sharing (CORS) Response Header' webfont issue?

.htaccess fonts cors font-face webfonts
MeltingDog picture MeltingDog · Nov 19, 2014 · Viewed 176k times · Source

For some reason fonts have stopped rendering on my sites. The fonts are stored locally, on the same server as the site.

I looked up the problem and it seems to be a Missing Cross-Origin Resource Sharing (CORS) Response Header but I cannot understand the solution for this.

All the various sites say to do is to use: Access-Control-Allow-Origin:*

But as I'm primarily front end I do not know where to put it. Is this something my host can help with?

What can I do to fix the issue?

EDIT:

the site in question is: http://cyclistinsuranceaustralia.com.au/

The phone number, for example, at the top right should be Bebas font but it is defaulting to Impact.

In the console, I get the errors:

Font from origin 'http://www.cyclistinsuranceaustralia.com.au' has been blocked from loading by Cross-Origin Resource Sharing policy: The 'Access-Control-Allow-Origin' header has a value 'http://www.cyclistinsuranceaustralia.com.au' that is not equal to the supplied origin. Origin 'http://cyclistinsuranceaustralia.com.au' is therefore not allowed access.

I contact my host who said to put:

Access-Control-Allow-Origin "http://www.cyclistinsuranceaustralia.com.au"

in my .htaccess file but this has no change.

Answer

Croises picture Croises · Nov 24, 2014

If you are just interested in the use of Access-Control-Allow-Origin:*

You can do that with this .htaccess file at the site root.

Header set Access-Control-Allow-Origin "*"

Some useful information here: http://enable-cors.org/server_apache.html

Related questions

Setting expire headers for fonts not working

I am using the below code in my .htaccess file to try and set the expire headers for some fonts, but upon checking my firefox cache and the expire header, the font is set to expire in about 12 hours from …

Read More
Access-Control-Allow-Origin Multiple Origin Domains?

Is there a way to allow multiple cross-domains using the Access-Control-Allow-Origin header? I'm aware of the *, but it is too open. I really want to allow just a couple domains. As an example, something like this: Access-Control-Allow-Origin: http://domain1.example, …

Read More
How to redirect all HTTP requests to HTTPS

I'm trying to redirect all insecure HTTP requests on my site (e.g. http://www.example.com) to HTTPS (https://www.example.com). I'm using PHP btw. Can I do this in .htaccess?

Read More