Search code examples
.htaccessfontscorsfont-facewebfonts

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

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.

Solution

  • In your HTML you have set a "base" tag:

    <base href="http://www.cyclistinsuranceaustralia.com.au/">
    1. Delete that line from your HTML if you don't need it. This should make the fonts work when viewed from http://cyclistinsuranceaustralia.com.au.
    2. You'll probably need to redirect http://www.cyclistinsuranceaustralia.com.au to http://cyclistinsuranceaustralia.com.au