Question: ❓❓❓

I have some fonts being configured in my Scss file like so:

@font-face {
  font-family: 'Icomoon';
  src: asset-url('icoMoon.eot?#iefix', font) format('embedded-opentype'),
       asset-url('icoMoon.woff', font) format('woff'),
       asset-url('icoMoon.ttf', font)  format('truetype'),
       asset-url('icoMoon.svg#Icomoon', font) format('svg');

The actual font file are stored in /app/assets/fonts/

I have added config.assets.paths << Rails.root.join("app", "assets", "fonts") to my application.rb file

and the compile CSS source is as follows:

@font-face {
  font-family: 'Icomoon';
  src: url(/assets/icoMoon.eot?#iefix) format("embedded-opentype"), url(/assets/icoMoon.woff) format("woff"), url(/assets/icoMoon.ttf) format("truetype"), url(/assets/icoMoon.svg#Icomoon) format("svg");

But when I run the app the font files are not being found. The logs:

Started GET “/assets/icoMoon.ttf” for at 2012-06-05 23:21:17 +0100
Served asset /icoMoon.ttf – 404 Not Found (13ms)

Why isn’t the asset pipeline flattening the font files down into just /assets?

Any ideas people?

Kind regards,

Extra info:

When checking the rails console for assets paths and assetprecompile I get the following:

1.9.2p320 :001 > y Rails.application.config.assets.precompile
- !ruby/object:Proc {}
- !ruby/regexp /(?:\/|\\|\A)application\.(css|js)$/
- .svg
- .eot
- .woff
- .ttf
=> nil

1.9.2p320 :002 > y Rails.application.config.assets.paths
- /Users/neiltonge/code/neiltonge/app/assets/fonts
- /Users/neiltonge/code/neiltonge/app/assets/images
- /Users/neiltonge/code/neiltonge/app/assets/javascripts
- /Users/neiltonge/code/neiltonge/app/assets/stylesheets
- /Users/neiltonge/code/neiltonge/vendor/assets/images
- /Users/neiltonge/code/neiltonge/vendor/assets/javascripts
- /Users/neiltonge/code/neiltonge/vendor/assets/stylesheets
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/jquery-rails-2.0.0/vendor/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/coffee-rails-3.2.1/lib/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/bourbon-1.3.0/app/assets/stylesheets
- !ruby/object:Pathname
  path: /Users/neiltonge/code/neiltonge/app/assets/fonts
 => nil

Good Answer: 👌👌👌

  1. If you are on Rails >3.1.0 and <4, you can simply place your fonts in the folders app/assets/fonts, lib/assets/fonts or vendor/assets/fonts.

    If you are on Rails 4+, you can only place your fonts in the folder app/assets/fonts.

    If you want to place them outside of these designated folders, you’ll need to add the following configuration:

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

    If you are on Rails 4.2+, it’s recommended to add this configuration in the file config/initializers/assets.rb.

    If you are not, add it to the file application.rb or production.rb.

  2. Declare your font in your css like so:

    @font-face {
      font-family: 'Icomoon';
      src:url('icomoon.eot?#iefix') format('embedded-opentype'),
        url('icomoon.svg#icomoon') format('svg'),
        url('icomoon.woff') format('woff'),
        url('icomoon.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;

    Make sure that the font is named exactly like in the url portion of the declaration. Capital letters and punctuation marks make a difference. So in this case the font should have the name icomoon.

  3. If you are using Sass or Less with Rails 3.1.0+ (so your css file has the .scss or .less extension), then change the url(...) in the font declaration to font-url(...).

    If you are not, then your css file should have the extension .css.erb and the font declaration should be changed to url('<%= asset_path(...) %>').

    Additionally, if you are using Rails 3.2.1+, you can use font_path(...) instead of asset_path(...). This helper does exactly the same thing but it’s just a little more clear.

  4. Finally, use your font in your css like you declared it in the font-family part. Since it was declared capitalized, you can use it like this:

    font-family: 'Icomoon';