Fontawesome Cross origin issues

Question

I want to load Fontawesome from a CDN but I get

failed cross-origin request. Resource access is restricted

I know that to fix this a HTTP header should be added, but is there any way to avoid doing this?

I tried replacing '../font/fontawesome-webfont.eot?v=3.2.0') with full urls but it didnt help for some reason. Is there anything that can be done without the header?

score 3 · Answer 1 · edited May 09 '17 at 15:01

3

You have to create .htaccess file on font folder with this text.

<FilesMatch ".(eot|ttf|svg|otf|woff|woff2)">
  Header set Access-Control-Allow-Origin "*"
</FilesMatch>

edited May 09 '17 at 15:01

unom

11,438
4
34
54

answered Feb 20 '17 at 17:09

Leonel Lands

39
2

score 1 · Answer 2 · edited May 23 '17 at 12:10

1

This is browsers’ same-origin policy restrictions http://www.w3.org/TR/css3-fonts/#same-origin-restriction.

If you are using amazon s3 this could help you Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading

edited May 23 '17 at 12:10

Community

1
1

answered Nov 07 '13 at 10:47

Nish

301
1
9

score 1 · Answer 3 · edited May 23 '17 at 12:26

1

Your CDN needs to include the Access-Control-Allow-Origin:* header in the response for the font files. See my answer to Font Awesome icons not showing in Chrome, a MaxCDN related Cross-Origin Resource Sharing policy issue

edited May 23 '17 at 12:26

Community

1
1

answered Oct 15 '14 at 23:38

Brent Washburne

12,904
4
60
82

score 0 · Answer 4 · answered Oct 03 '17 at 07:17

CORS Configuration

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
      <AllowedOrigin>http://www.your-site.com</AllowedOrigin>
       <AllowedOrigin>https://www.your-site.com</AllowedOrigin>
       <AllowedMethod>GET</AllowedMethod>
       <AllowedMethod>HEAD</AllowedMethod>
       <AllowedMethod>DELETE</AllowedMethod>
       <AllowedMethod>PUT</AllowedMethod>
       <AllowedMethod>POST</AllowedMethod>
     </CORSRule>
</CORSConfiguration>

Fontawesome Cross origin issues

4 Answers4

Linked