CODEWITHSUNDEEP
fontsgoogle-font-api
Daniel Chikaka
Daniel Chikaka

Reputation: 1692

Google Font not working giving an error "No 'Access-Control-Allow-Origin' header is present on the requested resource"

Sorry Guys, this might be a duplicate but i haven't find a solution yet

I have been using Google Fonts for all my projects. Recently, there is something strange happening, fonts not loading and when i inspect the console i find this error 

Font from origin 'http://fonts.gstatic.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://localhost' is therefore not allowed access.

I have checked online and read some of answers here at stackoverflow regarding the matter but failed to find the solution. What is happening with google fonts, is there a way to remove this problem? I would like to find a simple and working solution, please help.

Upvotes: 2

Views: 12687

Answers (3)

Justin Nafe
Justin Nafe

Reputation: 3052

This is an answer to an old question, but hopefully it will help someone.

If you are accessing Google Maps API or Fonts using http, try using the https version instead.

I had gotten stuck on this issue for a long time and none of the solutions worked except this one.

Upvotes: 2

Kenji Baheux
Kenji Baheux

Reputation: 11

Google Fonts should not lead to such an error on Chrome (fonts are already served with the Access-Control-Allow-Origin header = "*").

If this still happens, it would help if you can quickly open chrome://network-internals and click on export to save a dump of the latest network request.

If you can repro the issue, please follow these steps:

  1. close any extra tabs
  2. open chrome://net-internals
  3. in a different tab, reproduce the issue
  4. go back to the chrome://net-internals tab, fill up some description, click "save to file".

Next, in the net-internals dropdown select "capture" and click on stop. Finally, in the net-internals dropdown select "events" and search for fonts.gstatic.com, copy paste the relevant entries.

Note: the dump may contain unrelated network requests that you might not want to share, exercise caution when sharing the raw file.

Upvotes: 1

Prashant Tapase
Prashant Tapase

Reputation: 2147

Make changes in htaccess files as below so that u will get access 

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

Upvotes: 6

Related Questions