Firefox font issues - Bootstrap Glyphicons

Question

Trying to use Bootstrap 3.0 (pulled via Bower) Glyphicons icon font in an app. Works perfectly in all browsers locally.

In a staging environment on heroku, icon font isn't working on Firefox. Font is hosted in an S3 bucket WITH cross-domain settings setup -- this has been verified by testing the font with a curl command as described here. I get a 200 response, no issues. So, the fonts in the right place (not a path issue) and accessible (not a cross-domain issue -- probably.)

In fact, when I look in the Network panel in firefox, I see a 200 response on the fonts... But the file size is listed as 0kb.

I have tried multiple content types (font/x-woff, application/x-woff), I have tried using font-squirrel's base 64 encoding (didn't work).

I've seen that Bootstrap's customized downloader has broken fonts but this is straight from the repo via Bower.

I have no idea what else to try. Halp?

Answer 1

Just looping back on this-- brushed the icon font aside in favor of an SVG solution, and in the interim we changed CDN providers, and redid all our CDN settings, while the S3 bucket settings remained the same. Checked the icon fonts in Firefox and voila, no more issues.

So I think our CDN's settings were somehow not passing through the needed permissive S3 settings, or so my coworker suggested.

Answer 2

Don't know if you ever got this solved or not, but I hit the same issue today and the cause of it is because Firefox is a bit strict about hosting your font on a separate domain. If you check out the Firefox web console, it should show an error like this:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http:// path/to/fonts/glyphicons-halflings-regular.ttf. This can be fixed by moving the resource to the same domain or enabling CORS.

Apparently, there's a way to configure your S3 bucket to stop this from happening ( Boootstrap glyphicons Firefox issues ), but I haven't tried it yet.