icons do not show on heroku #1

Open
mugwump opened this Issue Mar 16, 2012 · 15 comments
@mugwump

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

@littlebtc
Owner

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.

@mugwump

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:

/assets/fontawesome-webfont-eeecec082197cc0255b0c549b4e612ea.eot

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

/assets/fontawesome-webfont.eot

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.

@amer

I have the same problem.

@mugwump

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.

@pixelsonly

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

@ronnietaylor

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.

@mugwump

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.

@ronnietaylor

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.

@zapnap

Same issue still happening today.

@mrrazahussain

@ronnietaylor thank alot for your steps to fix this issue

@rmm5t

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?

@ronnietaylor

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.

@twanlass

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

@thomasklemm

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

@v3rron

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