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

Question

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 1

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