icons do not show on heroku #1

mugwump opened this Issue Mar 16, 2012 · 15 comments

works like a charm when I view it locally, shows only empty boxes when I deploy the app to heroku. Does anyone have any idea why the web-fonts are not shown properly on heroku?!

I checked the webfonts, and they are all there, but they all(fontawesome-webfont.ttf , .eot...) have a size of 0 bytes. There seems to be something going wrong when the assets are compiled by heroku...


0.2.0 version of the gem seems to work on Rails 3.2.2 with Cedar stack: http://pure-night-6884.herokuapp.com/
If it still doesn't work, report the Rails version and what heroku stack you are using.


Thx for looking into this - I'm already running on 3.2.2 and 0.2.0 on Cedar - but there seems to be a difference in the way the ressources are setup in your example: Are you not precompiling your assets? In your example-app, the url for the fonts is:


which resolves fine. In my app, the urls are:


which also resolves, but the font-files are empty. I'll try to find out, where the difference comes from and how this can be solved.


I have the same problem.


for me, it was a problem with the precompile: There was another, unrelated issue that broke the precompile: When I fixed this and heroku precompiled all assets successfully, the fonts where also resolved. Check the deployment-logs, if the precompile runs through: If it fails, heroku falls back on the live-compilation of assets, which obviously does not work for the font-files.


For me, the fonts weren't loading in Rails 3.2.1. I bumped up to 3.2.6 and all works great!


I'm using Rails 3.2.6 and the current version of the scss files from this gem running on Heroku Cedar. The font displays locally but when I push to Heroku my assets get precompiled there and the path gets set wrong in the css.

In my _font-awesome.scss the font path is:

$font_path: "fonts/fontawesome-webfont" !default;

Locally the working CSS comes out as:

@font-face {
font-family: 'FontAwesome';
src: url(/assets/fonts/fontawesome-webfont.eot);
src: url(/assets/fonts/fontawesome-webfont.eot?#iefix) format('eot'), url(/assets/fonts/fontawesome-webfont.woff) format('woff'), url(/assets/fonts/fontawesome-webfont.ttf) format('truetype'), url(/assets/fonts/fontawesome-webfont.svgz#FontAwesomeRegular) format('svg'), url(/assets/fonts/fontawesome-webfont.svg#FontAwesomeRegular) format('svg');
font-weight: normal;
font-style: normal;

Here is the corresponding, broken css generated by Heroku:

@font-face {
font-family: 'FontAwesome';
src: url('//fonts/fonts/fontawesome-webfont.eot');
src: url('//fonts/fonts/fontawesome-webfont.eot?#iefix') format('eot'), url('//fonts/fonts/fontawesome-webfont.woff') format('woff'), url('//fonts/fonts/fontawesome-webfont.ttf') format('truetype'), url('//fonts/fonts/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'), url('//fonts/fonts/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
font-weight: normal;
font-style: normal; }

Any thoughts are appreciated.


I also couldn't really resolve this: I ended up copying the webfonts into the assets-folder of my app, then they actually can be found: There seems to be an issue with font-assets inside gems (at least that was my assumption. Also make sure that your asset-precompile runs through on heroku (check the deploy log...): For some strange reason, if heroku switches to the dynamic compilation the fonts are not resolved, altough they are actually available (can be downloaded, opened with a browser etc.) - I really did not find out why this is happening (maybe mime-type-issues?!): but these two steps (making the fonts available, asset-precompile running through) worked for me on heroku.


Thanks @mugwump

Seems like you led me to a fix.

1) Moved my fonts to app/assets/fonts
2) Removed the 'fonts' path prefix in _font-awesome.scss
3) At the top of config/application.rb enabled Bundler.require(:default, :assets, Rails.env) and disabled the previous

If those bits are helpful to anyone I'm happy to explain more in depth.

Thanks peoples.


Same issue still happening today.


@ronnietaylor thank alot for your steps to fix this issue


Is this still an issue worth keeping open? If not, does the latest v3.0.0.1 release fix your issue and/or does #25 help?


I just recently upgraded to rails 3.2.11 per a security announcement and while upgrading tonight to fontawesome v3.0.0.1 I had to set $fontAwesomePath in font-awesome.scss to:

$fontAwesomePath: "" !default;

That's even though my font files are located in app/assets/fonts

Maybe I'm putting my fonts in the wrong place but that's what works for me.


Having a similar issue though I'm wondering if it's a CORS issue (I'm serving assets via a CloudFront distribution).


@twanlass That's certainly possible to be a CORS issue. Do you set any special headers to make your webfonts CORS-friendly?


Have the same issue until now. Font-awesome-sass 4.0.2. The fonts were working almost properly when it was on CDN, but I had a couple of rendering issues and didn't want to rely on CDN, so I installed this gem. Works like a charm on localhost, but on Heroku it shows empty boxes. ((

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment