fonts are blocked in web client cors

Question

While I was working in local everything worked perfectly, now I uploaded to a hosting and the fonts are being blocked by something I've never heard of (CORS). The fonts (and css, js, etc) are in a subdomain because urls are parsed by the index (so paths are not working in the domain). The css/js are working ok.

This is the output in the web console (firefox):

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/Oxygen-Regular.ttf. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown> downloadable font: download failed (font-family: "Oxygen-Regular" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: /fonts/Oxygen-Regular.ttf styles.css:10:12 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/Montserrat-Regular.ttf. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown> downloadable font: download failed (font-family: "Montserrat-Regular" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: /fonts/Montserrat-Regular.ttf styles.css:6:12 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/glyphicons-halflings-regular.woff2. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown> downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: /fonts/glyphicons-halflings-regular.woff2 bootstrap.css:267:12 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/glyphicons-halflings-regular.woff. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown> downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed source: /fonts/glyphicons-halflings-regular.woff bootstrap.css:267:12 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/glyphicons-halflings-regular.ttf. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown> downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:3): bad URI or cross-site access not allowed source: /fonts/glyphicons-halflings-regular.ttf bootstrap.css:267:12 

I searched for this problem but i cannot find this especific problem with fonts and the exact error message.

EDIT:

The fix is to enable the header for the domain / folder serving the files. The config can be either in the virtual host block or in a .htaccess file (in the folder where the files are). I prefer setting it in the vhost block:

<IfModule mod_headers.c>     SetEnvIf Origin "https://(www|sub1|sub2|sub3).domain.com)$" ACAO=$0     Header set Access-Control-Allow-Origin "%{ACAO}e" env=ACAO     Header set Access-Control-Allow-Methods "GET" </IfModule> 

In this example, the Access-Control-Allow-Origin will only send the header for the whitelisted domain and subdomains. I redirect from domain.com to www.domain.com so this example won't accept a domain without www.

Answer 1

Your browser is complaining about a missing header: Access-Control-Allow-Origin

Because this header is missing your browser does not know that the desired access is legit. Have a look at http://enable-cors.org and choose the configuration appropriate for your server.

You need to configure the server where the fonts are stored !