Menu
I have a website hosted on App Engine (python2.7) and a linked blogger on the subdomain. I use shared resources on the blogger account. Specifically, I share icon fonts which I import in my CSS (example below).
@font-face {
font-family: "FontAwesome";
src: url('fonts/fonts/fontawesome/fontawesome-webfont.eot');
src: url('fonts/fonts/fontawesome/fontawesome-webfont.eot?#iefix') format('eot'),
url('fonts/fonts/fontawesome/fontawesome-webfont.woff') format('woff'),
url('fonts/fonts/fontawesome/fontawesome-webfont.ttf') format('truetype'),
url('fonts/fonts/fontawesome/fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight: normal;
font-style: normal;
}
The @font-face import works in every browser except for Firefox which doesn't allow for Cross-Origin Resource Sharing.
How do I change the header on my static fonts folder on App Engine to enable the import to work correctly in Firefox?
631
If the server is under your control, add the origin of the requesting site to the set of domains permitted access by adding it to the Access-Control-Allow-Origin header's value. You can also configure a site to allow any site to access it by using the * wildcard. You should only use this for public APIs.
Since the header is currently set to allow access only from https://yoursite.com , the browser will block access to the resource and you will see an error in your console. Now, to fix this, change the headers to this: res. setHeader("Access-Control-Allow-Origin", "*");
What is the Access-Control-Allow-Origin response header? The Access-Control-Allow-Origin header is included in the response from one website to a request originating from another website, and identifies the permitted origin of the request.
Added the following handler to my app.yaml on app engine and the import now works fine in all browsers.
handlers:
- url: /fonts
static_dir: fonts
http_headers:
Access-Control-Allow-Origin: "*"
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