I'm trying to use a google font 'Oswald'. When i embed it into my page in the recommended way:
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
Chrome throws the following error:
XMLHttpRequest cannot load http://fonts.googleapis.com/css?family=Oswald:400,300,700. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://<<redacted>>' is therefore not allowed access.
Is this just a mistake on google's part or am i doing something wrong?
There Are Two Approaches to Getting It Right.Use a reverse proxy server or WSGI server(such as Nginx or Apache) to proxy requests to your resource and handle the OPTIONS method in the proxy. Add support for handling the OPTIONS method in the resource's code.
Run the following command to confirm the origin server returns the Access-Control-Allow-Origin header. Replace example.com with the required origin header. Replace https://www.example.net/video/call/System.generateId.dwr with the URL of the resource that's returning the header error.
Limiting the possible Access-Control-Allow-Origin values to a set of allowed origins requires code on the server side to check the value of the Origin request header, compare that to a list of allowed origins, and then if the Origin value is in the list, set the Access-Control-Allow-Origin value to the same value as ...
Turns out it was a conflict with prefixfree
Solution was to add "data-noprefix" to the link tag, like so:
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css' data-noprefix>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With