How can I fix the Missing Cross-Origin Resource Sharing CORS Response Header webfont issue

Question

For some reason fonts have stopped rendering on my sites  The fonts are stored locally  on the same server as the site   I looked up the problem and it seems to be a Missing Cross-Origin Resource Sharing  CORS  Response Header but I cannot understand the solution for this   All the various sites say to do is to use  Access-Control-Allow-Origin    But as I m primarily front end I do not know where to put it  Is this something my host can help with   What can I do to fix the issue   EDIT   the site in question is  http   cyclistinsuranceaustralia com au   The phone number  for example  at the top right should be Bebas font but it is defaulting to Impact   In the console  I get the errors      Font from origin  http   www cyclistinsuranceaustralia com au  has been blocked from loading by Cross-Origin Resource Sharing policy  The  Access-Control-Allow-Origin  header has a value  http   www cyclistinsuranceaustralia com au  that is not equal to the supplied origin  Origin  http   cyclistinsuranceaustralia com au  is therefore not allowed access    I contact my host who said to put   Access-Control-Allow-Origin  http   www cyclistinsuranceaustralia com au    in my  htaccess file but this has no change

User · Answer

In your particular case the issue seem to be with accessing the site from non-canonical url (www.site.com vs. site.com).

Instead of fixing CORS issue (which may require writing proxy to server fonts with proper CORS headers depending on service provider) you can normalize your Urls to always server content on canonical Url and simply redirect if one requests page without "www.".

Alternatively you can upload fonts to different server/CDN that is known to have CORS headers configured or you can easily do so.

User · Answer

If you are just interested in the use of  Access-Control-Allow-Origin    You can do that with this  htaccess file at the site root   Header set Access-Control-Allow-Origin       Some useful information here  http   enable-cors org server apache html

User · Answer

We had this exact problem with fontawesome-webfont woff2 throwing a 406 error on a shared host  Cpanel   I was working on the elusive  cookie-less domain  for a Wordpress Multisite project and my  www domain tld  pages would have the following error  3 times  in Chrome      Font from origin  http   static domain tld  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   www domain tld  is therefore not allowed access    and in Firefox  a little more detail      downloadable font  download failed  font-family   FontAwesome  style normal weight normal stretch normal src index 1   bad URI or cross-site access not allowed source  http   static domain tld wp-content themes some-theme-here fonts fontawesome-webfont woff2 v 4 7 0   font-awesome min css 4 14   Cross-Origin Request Blocked  The Same Origin Policy disallows reading the remote resource at http   static domain tld wp-content themes some-theme-here fonts fontawesome-webfont woff v 4 7 0   Reason  CORS header    Access-Control-Allow-Origin    missing     I got to QWANT-ing around  QWANT com   fantastic  and found this SO post   Access-Control-Allow-Origin wildcard subdomains  ports and protocols  An hour in chat with different Shared Host support staff  one didn t even know about F12 in a browser     then waiting for a response to the ticket that got cut after no joy while playing with mod security  I tried to cobble the code for the  htaccess file together from the post in the meantime  and got this to work to remedy the 406 errors  flawlessly        lt IfModule mod headers c gt       lt IfModule mod rewrite c gt          SetEnvIf Origin  http s            domain  tld   d 1 5      CORS  0         Header set Access-Control-Allow-Origin    CORS e  env CORS         Header merge  Vary  Origin       lt  IfModule gt       lt  IfModule gt    I added that to the top of my  htaccess at the site root and now I have a new Uncle named Bob      of course change the domain tld parts to whatever your domain that you are working with is      My FAVORITE part of this post though is the ability to RegEx OR     multiple sites into this CORS  hack  by doing      To allow Multiple sites    SetEnvIf Origin  http s             othersite  com mywebsite  com    d 1 5      CORS  0   This fix honestly kind of blew my mind because I ve ran into this issue before  working with Dev s at Fortune 500 companies that are MILES above my knowledgebase of Apache and couldn t solve problems like this without getting IT to tweak on Apache settings   This is kind of the magic bullet to fix all those CDN issues with cookie-less  or near cookie-less if you use CloudFlare     domains to reduce the amount of unnecessary web traffic from cookies that get sent with every image request only to be ditched like a bad blind date by the server   Super Secure  Super Elegant  Love it  You don t have to open up your servers bandwidth to resource thieves   hot-link-er types   Props to a collective effort from these 3 brilliant minds for solving what was once thought to unsolvable with  htaccess  whom I pieced this code together from    Noyo https   stackoverflow com users 357774 noyo   DaveRandom https   stackoverflow com users 889949 daverandom   pratap-koritala https   stackoverflow com users 4401569 pratap-koritala

User · Answer

In your HTML you have set a  base  tag    lt base href  http   www cyclistinsuranceaustralia com au   gt     Delete that line from your HTML if you don t need it  This should make the fonts work when viewed from http   cyclistinsuranceaustralia com au  You ll probably need to redirect http   www cyclistinsuranceaustralia com au to http   cyclistinsuranceaustralia com au

User · Answer

I m going to assume your host is using C-Panel - and that it s probably HostGator or GoDaddy   In both cases they use C-Panel  in fact  a lot of hosts do  to make the Server administration as easy as possible on you  the end user   Even if you are hosting through someone else - see if you can log in to some kind of admin panel and find an  htaccess file that you can edit    Note  The period before just means that it s a  hidden  file directory    Once you find the htaccess file add the following line    Header set Access-Control-Allow-Origin     Just to see if it works  Warning  Do not use this line on a production server   It should work   If not  call your host and ask them why the line isn t working - they ll probably be able to help you quickly from there    Once you do have the above working change the   to the address of the requesting domain http   cyclistinsuranceaustralia com au    You may find an issue with canonical addressing  including the www  and if so you may need to configure your host for a redirect   That s a different and smaller bridge to cross though   You ll at least be in the right place

User · Answer

we had similar header issue with Amazon  AWS  S3 presigned Post failing on some browsers   point was to tell bucket CORS to expose header  lt ExposeHeader gt Access-Control-Allow-Origin lt  ExposeHeader gt    more details in this answer  https   stackoverflow com a 37465080 473040

[.htaccess] How can I fix the 'Missing Cross-Origin Resource Sharing (CORS) Response Header' webfont issue?

Examples related to .htaccess

Examples related to fonts

Examples related to cors

Examples related to font-face

Examples related to webfonts