CSS - Font Being Blocked from Cross-Origin Resource Sharing Policy

CSS - Font being blocked from Cross-Origin Resource Sharing Policy

If you control the server, then you can adjust the settings of your server Apache/Nginx or whatever to add the Access-Control-Allow-Origin header to your HTTP responses.

In your case, you probably want something like (this will allow your domain to access the fonts, but prevent other domains from using it, including your own subdomains):

Access-Control-Allow-Origin: https://www.stubwire.com

I got the Access-Control-Allow-Origin header usage from: http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Here is another resource that gives examples of how to set up various servers (IIS, Nginx, Apache) to add the Access-Control-Allow-Origin header: http://support.maxcdn.com/how-to-use-cdn-with-webfonts/

Typeface and Images Cross-Origin Resource Sharing

The requirements here are from the Font fetching requirements section in the CSS Fonts spec:

For font loads, user agents must use the potentially CORS-enabled fetch method defined by the [HTML5] specification for URL's defined within @font-face rules. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet's URL and set the origin to the URL of the containing document.
The implications of this for authors are that fonts will typically not be loaded cross-origin unless authors specifically takes steps to permit cross-origin loads. Sites can explicitly allow cross-site loading of font data using Access-Control-Allow-Origin.

The combination of “potentially CORS-enabled fetch” and the “Anonymous” state is actually to make cross-origin font fetching always CORS-enabled (not just “potentially“)—because the HTML spec says the mode for the “Anonymous” state is always cors:

State	Keywords	Description
anonymous	`Anonymous`	Requests for the element will have their mode set to "`cors`" and their credentials mode set to "`same-origin`".

Font from subdomain has been blocked by Cross-Origin Resource Sharing Policy

Try this in your .htaccess file:

# Allow font assets to be used across domains and subdomains
<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
  <IfModule mod_headers.c>
     Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

You can read more about this issue in this excellent article I found: https://expressionengine.com/learn/cross-origin-resource-sharing-cors

Get CSS from different domain blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

First please read this Cross Origin Resource Sharing (CORS) to know how you can share resources with CORS.

The CORS standard works by adding new HTTP headers which allow servers to serve resources to permitted origin domains. Browsers support these headers and respect the restrictions they establish.

Example: Say your site is http://my-cool-site.com and, you have a third party API at domain http://third-party-site.com, which you can access via AJAX.

And let's assume that a page you server from my-cool-site.com made a request to third-party-site.com. Normally, users browser will decline AJAX calls to any other site other than your own domain/subdomain per the Same-Origin Security Policy. But if the browser and the third party server supports CORS, the following things happen:

Browser will send the following HTTP header to third-party-site.com
```
Origin: http://my-cool-site.com
```
If the third party server accepts requests from your domain, it will respond with the following HTTP header:
```
Access-Control-Allow-Origin: http://my-cool-site.com
```
To allow all domains, third party server can send this header:
```
Access-Control-Allow-Origin: *
```
If your site is not allowed, browser will throw an error.

If the client's have fairly modern browsers that support CORS, and your third party server supports CORS as well, you can definitely go for it with minor changes to your code.

fonts are blocked in web client cors

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 !

CSS - Font Being Blocked from Cross-Origin Resource Sharing Policy