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 origi

Answer 1

This issue of accessing font-awesome assets has been a problem for many people without a comprehensive explanation and resolution to the problem.

What is CORS:

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to let a user agent gain permission to access selected resources from a server on a different origin (domain) than the site currently in use. A user agent makes a cross-origin HTTP request when it requests a resource from a different domain, protocol, or port than the one from which the current document originated.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

The Problem:

The problem stems from how the font-awesome fonts are loaded.

@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
}

The fonts are loaded via the stylesheet (CSS). The situation we have here is:

The Solution:

While CORS rules have been created on your file storage e.g. S3, and access to the resource has been given to the domain in question, when CDN tries to load the fonts specified in the CSS the origin/domain specified when loading these fonts is that of the CDN but no CORS access has given to the CDN domain.

Create a CORS rule for the CDN domain.

Answer 2

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 3

I use a CDN that doesn't allow me to modify its response, so I modified font-awesome.min.css, replacing relative path with absolute path and it worked.

Answer 4

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?

Answer 5

None of the answers worked for me, I had to create an edge rule on maxcnd back office (which change config file on you zone)

More info here

https://www.maxcdn.com/one/tutorial/edge-rules-recipes/ https://www.maxcdn.com/one/tutorial/create-a-rule/