Font blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin'

Question

we are experiencing this error in Google Chrome. We thought everything was set-up correct. But maybe not?

Font from origin http://skin.cdn.com 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://domain2.com is therefore not allowed access.

And we have the following in htaccess (in the root of the domain).

<IfModule mod_headers.c>    
Header add Access-Control-Allow-Origin "http://skin.cdn.com" 
</IfModule>

Question: did I forget other settings?

many thanks

Answer 1

Change your htaccess file code on your website root directory (i.e. Your public_html ".htaccess" file)

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "http://skin.cdn.com"
    </IfModule>
</FilesMatch>

Now your CDN will be allowed to load your resource calling them as a passing resource of yours (the fonts).

CAVEAT: You need to PURGE ALL in your CDN so the files will be updated in a few minutes.

Answer 2

I don't have enough reputation to comment on @Prashant Tapase 's answer, But Your root Directory is not Your Public_html. This is a sub directory of your root directory. & from the answers that I have been researching The FileMatch directive should be inside the IfModule As shown below

<IfModule mod_headers.c>
    <FilesMatch "\.(eot|otf|ttc|ttf|woff|woff2)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

Please correct me if this is wrong.
Or you can specify specific URL's/URI's of fonts like he has mentioned.

Also If it is a CDN you should be using the https version not http if possible.