Google Cloud Storage fonts CORS issue

Such issues, when hosting fonts on GCS, could also be related to missing CORS configuration on the GCS bucket.
(See https://cloud.google.com/storage/docs/cross-origin).

You may define cors access settings with:

gsutil cors set cors-config.json gs://my-bucket

And your cors-config.json could be, for example:

[
    {
      "origin": ["*"],
      "responseHeader": ["Content-Type"],
      "method": ["GET"],
      "maxAgeSeconds": 3600
    }
]

Meaning ok to read from all origins.


Edit from 2019: Chrome fixed this years ago!

Interesting! There is a Chrome bug (issue 544879) in which Chrome insists that it needs credentials for loading fonts, even though it does not. Looks like that's likely to be your problem.

While you wait for that bug to be fixed, you may consider these options:

  1. Use HTTP instead of HTTPS when referencing storage.googleapis.com. HTTP may not be vulnerable to this problem.
  2. List specific domains instead of a wildcard in yours CORS policy.
  3. Rather than hosting a font and referencing it with @font-face, host a CSS file with the font encoded as a data URI. Example: https://www.filamentgroup.com/lab/font-loading.html