Font Awesome icons not showing in Chrome, a MaxCDN related Cross-Origin Resource Sharing policy issue

Question

just noticed on several websites that the font awesome icons aren's showing in Google Chrome. The console shows the following error:

Font from origin 'http://cdn.keywest.life' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.keywest.life' is therefore not allowed access.

I found the exact same issue on several other sites. This can be easily fixed by replacing the own CDN reference with:

//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

-however, this is not the solution, just a workaround. I would love to know the reason and the right solution.

(the cause is this: the website is using it's own CDN, provided by MaxCDN and has the reference to the font awesome fonts and these are not loaded by Chrome, if you are loading the same resource from the Bootstrapcdn resource -mentioned above- it works)

here is a n example of the issue (in the menu and the social icons in footer: http://www.keywestnight.com/fantasy-fest )

Thanks for any help/explanatioon!

Answer 1

Here is the working method to allow access from all domains for webfonts:

# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>