Search code examples
firefoxcross-domainfont-facewebfontswoff

Firefox font issues - Bootstrap Glyphicons


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?


Solution

  • 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.