Fonts in Rails 4.0 on heroku

Question

I'm having a strange issue loading my fonts on heroku. They look fine in development, but whenever I push to heroku they do not load.

I added the font path to my application.rb as follows:

config.assets.paths << "#{Rails.root}/app/assets/fonts"

In my application.css.scss I have the following code:

@font-face {
  font-family:'FontAwesome';
  src: url('fontawesome-webfont.eot'),
  url('fontawesome-webfont.eot'),
  url('FontAwesome.otf'),
  url('fontawesome-webfont.svg'),
  url('fontawesome-webfont.ttf'),
  url('fontawesome-webfont.woff'),
  url('glyphicons-halflings-regular.eot'),
  url('glyphicons-halflings-regular.svg'),
  url('glyphicons-halflings-regular.ttf'),
  url('glyphicons-halflings-regular.woff');
  font-weight: normal;
  font-style: normal;

}

When I upload it to heroku fonts do not load. I looked at the page source and the fonts are loading with this directory:

/fonts/assets/fonts/fonts/fontawesome-webfont.eot

Does anybody know why this is happening and what can be done about it?

Thanks!

Answer 1

So It looks like the issue was that I needed to clean out my public/assets directory. I'm still a bit foggy on how the asset pipeline works, but my guess is that on production environments rails looks in this directory first, then your app/assets folder.

Thanks!

Answer 2

Rather than url('fontawesome-webfont.eot'), you should be using the asset pipeline font url helper: font-path('fontawesome-webfont.eot'). You also don't need to add the fonts folder to the asset pipeline, any folders inside of assets are included automatically. See http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets 2.3.2 for more information.