Access-Control-Allow-Origin header on Google App Engine

Question

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?

Enfeeble

Answer 1

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: "*"

Enfeeble

Not relevant in 2024 – Saturday

Answer 2

If your assets are stored in Google Cloud Storage, you can set the headers by following this guide: https://cloud.google.com/storage/docs/cross-origin

Permanence