Google Chrome + FireFox not loading custom fonts (access-control-allow-origin) - css

I believe it was yesterday when my website's custom fonts ceased to function. Now, the fonts are only shown on Safari, while Chrome and Firefox throw access control allow origin errors to their respective consoles.
Chrome Error:
Access to font at 'https://blockheaddevdevdev--grify.repl.co/styles/font/wide.ttf' from origin 'https://blockheaddevdevdev.grify.repl.co' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Firefox Error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://blockheaddevdevdev--grify.repl.co/styles/font/wide.ttf. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).[Learn More]
Here is the font I am using
Here is the CSS that applies the fonts to the page
Here is the page that should run these custom fonts

you are importing your style.css from this domain:
https://blockheaddevdevdev--grify.repl.co
<link href="https://blockheaddevdevdev--grify.repl.co/styles/style.css" rel="stylesheet" type="text/css">
and not: https://blockheaddevdevdev.grify.repl.co
Thats why you get an Cross-Origin Error.
If you fix the Link tag you shouldnt get that error.

I replaced the my url http://127.0.0.1/sitename/ into http://localhost/sitename/ and it worked

Related

document.styleSheets[x].cssRules are null

When I inspect a website,
I see the cssRules from document.styleSheets[x].cssRules
However, with this website stackoverflow.com, when I inspect with Chrome browser, I see document.styleSheets, but cssRules is null.
How come this is possible?
That's because the style sheets are coming from a different domain. Some browsers (such as Chrome) implement strict cross-domain policies by throwing security errors or setting the cssRules and ownerRule to null when it comes from a different domain...in your case the style sheets come from a CDN
MDN quotes the following in the CSSStyleSheet documentation...
In some browsers, if a stylesheet is loaded from a different domain,
calling cssRules results in SecurityError.
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet
To try bypass this problem, you can add crossorigin="anonymous" in the link tag to prevent the error.
More info here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin
This will create a potencial cors request but the server must respond with Access-Control-Allow-Origin: * or Access-Control-Allow-Origin: <authorized-domain>.
You can check here to see how to add CORS support to your server.
For more information about CORS you can read this and this.

How to allow FontAwesome to load fonts from a different domain

When hosting FontAwesome on a CDN, how do you allow it to load fonts when that CDN's domain does not match your server's domain?
I have my media hosted in an S3 bucket, being served from a Cloudfront endpoint. My webpage, served from example.com, contains links to this Cloudfront endpoint, and all the initial media requests to this endpoint succeed. However, if I trigger any JS that tries to render new FontAwesome content, causing it to try and load fonts, I get an error like:
Access to Font at 'http://lkfejwifisj.cloudfront.net/font-awesome-4.2.0/fonts/fontawesome-webfont.d95d6f5d5ab7.woff?v=4.2.0' from origin 'http://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com' is therefore not allowed access.
I made my S3 bucket's CORS policy as open as possible with the configuration:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
However, that didn't fix the problem.
I'm using Chrome as my browser, and apparently this type of error has been mentioned many many times before. However, none of the proposed solutions are applicable, or don't work for me.
How do I fix this?
Why is Chrome saying "No 'Access-Control-Allow-Origin' header is present on the requested resource", when I explicitly allow all origins in my CORS configuration?
It turned out that my CORSConfiguration is correct, and actually fixes the problem, but my browser is caching the old request and so I still see the same error.
If I load the page in an Incognito browser, ensuring my cache is cleared, I don't get the error.

CORs inline material for AFrame

<a-sphere material="src:url(...)"></a-sphere>
I get:
No 'Access-Control-Allow-Origin' header is present on the requested resource
Other resources not inline do work with CORs. Also I have the newest AFrame version working.
Try adding the crossorigin="anonymous" to the resource to explicitly allow images from other domains.
https://aframe.io/docs/0.2.0/core/asset-management-system.html#cross-origin
That means the resource is not being served with CORS headers. The server does not allow it.

Font from origin has been blocked in ASP MVC

I put font references to sub domain and I using that like this:
<link href="https://cdn.example.com/Styles/font-awesome.min.css" rel="stylesheet" />
Font from origin 'https://cdn.example.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 'https://example.com' is therefore not allowed access.
I found a solution but it doesn't help me, I think the reason is I use https instead of http.
Serving contain to sub domains from an MVC / IIS web application

Certain fonts and Characters no being displayed

I get the error:
Font from origin 'http://livehealthyme.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://www.livehealthyme.com' is therefore not allowed access. www.livehealthyme.com/:1
I think it is because I am using Ninja Firewall on my site. Is there a way to allow my fonts and still have my firewall up?

Resources