css - @font-face failed cross-origin request. Resource access is restricted.

Question

I am using the latest version of FontAwesome like this:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
     <!--[if IE 7]>
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome-ie7.min.css">
    <![endif]-->

It works fine in Chrome, FireFox and Safari, but when I go to Internet Explorer 10 (Older versions has the same issue), I see this error:

CSS3117: @font-face failed cross-origin request. Resource access is restricted. 
fontawesome-webfont.eot
CSS3117: @font-face failed cross-origin request. Resource access is restricted. 
fontawesome-webfont.woff

I have tried to add the FileMatch to my .htaccess file, but that didn't do the trick.

I thought that using the CSS files from FontAwesomes CDN, eliminated IE errors..

Can someone please help me?

Answer 1

You should download and host font-awesome on your server and call it from there

Answer 2

Add the line below in your .htaccess:

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