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> 

Answer 2

The problem isn't with the CSS file, it has to do with how the font file is served. The font-awesome.min.css file has lines like

@font-face{font-family:'FontAwesome'; src:url('../fonts/fontawesome-webfont.eot?v=4.2.0'); src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.2.0')  format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.2.0')  format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg'); font-weight:normal; font-style:normal} 

which cause the browser to request an appropriate font file (eot, woff, ttf or svg) from the same server as the CSS file. This is logical and correct.

However, when the browser requests that font file from cdn.keywest.life, it reads the headers for a Access-Control-Allow-Origin header and doesn't find one so it gives that error message. (This seems like a browser bug to me because it's coming from the same server as the CSS file).

Instead, when you use maxcdn.bootstrapcdn.com the response includes the Access-Control-Allow-Origin:* header and the browser accepts this font file. If your cdn server included this header then it would work too.

If you have an Apache server, see this answer: Font-awesome not properly displaying on Firefox / how to vend via CDN?