Cannot find font assets with Rails 4 on Heroku

[sladman]

I had the issue described in these stackoverflow questions, where my app could not find the font assets on Heroku: http://stackoverflow.com/questions/19323563/heroku-font-assets-not-working http://stackoverflow.com/questions/10905905/using-fonts-with-rails-asset-pipeline

The solution, as described in their answers, is to give the foundation-icons.css file an scss extension (foundation-icons.css.scss) and then replace url( ) with the font-url( ) scss helper in the @font-face{ } declaration like so:

@font-face {
  font-family: "foundation-icons";
  src: font-url( "foundation-icons.eot" );
  src: font-url( "foundation-icons.eot?#iefix" ) format("embedded-opentype"),
       font-url( "foundation-icons.woff" ) format("woff"),
       font-url( "foundation-icons.ttf" ) format("truetype"),
       font-url( "foundation-icons.svg#fontcustom" ) format("svg");
  font-weight: normal;
  font-style: normal;
}

Would this change best be incorporated in the gem itself? I don't think it should break anything for anyone, as people already need sass installed for this gem to work.

Cheers, Scott

[rdetert]

This didn't quite work for me. Still lots of manual work involved. Here is how I got things working.

Add this line to your application.rb file:

config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

You need to include the SASS directive asset_path into @sladman snippet. Here is what my application.css.scss looks like. N

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require foundation_and_overrides

 *= require_tree .
 */

@import 'foundation-icons';

@font-face {
  font-family: "foundation-icons";
  src: font-url( asset-path("foundation-icons.eot") );
  src: font-url( asset-path("foundation-icons.eot?#iefix") ) format("embedded-opentype"),
       font-url( asset-path("foundation-icons.woff") ) format("woff"),
       font-url( asset-path("foundation-icons.ttf") ) format("truetype"),
       font-url( asset-path("foundation-icons.svg#fontcustom") ) format("svg");
  font-weight: normal;
  font-style: normal;
}

I also had to compile using RAILS_ENV=production && rake assets:precompile

[ghost]

Did all of the above and still no icons.

Edit1 : actually the icons are now NOT working on my local machine.

[doshea]

This solution DID work for me, fyi. Thanks, rdetert!

[wkoffel]

@rdetert Took 30 minutes of hunting, but this solution did the trick for me. Basically just overriding the font declaration with the explicit asset-path version. Simple, but someone elusive! Thank you.

[Bw00d]

So do I need to download the fonts and put them in my assets folder or is the gem supposed to handle that? I tried the other solutions and still no fonts in Heroku.

[bartlomiejmatlega]

Thanks @rdetert for this solution. Works for me :)

[seigel]

Don't forget to change your application.css to application.css.scss

[rdetert]

My solution stopped working for me as well in my latest project. After several hours of messing with it. I've decided the easiest thing was to use Foundation's CDN:

<link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">

[mrdougwright]

+1 @rdetert

[Ankita-Viva]

I tried all the above mentioned stuff, but no luck yet. Any suggestion please!

[Bw00d]

So turns out the problem I had was a missing devise secret_key. Before you precompile your assets for production you need to put the secret key in config/initializers/devise.rb. Checkout the commented out lines: 8. # Add secret key from .env file when precompiling assets 9. # config.secret_key = '' Just plug in your secret key and precompile assets. Make sure you remove the secret key before you do a git add! It's kind of a pain in the but to do every time you want to precompile. You could probably use an environment variable so that you don't have to repeat this all the time, but try plugging it in and see if that does the trick.

Took me awhile trying all of the above suggestions. Hope this helps you.