Heroku Rails asset pipeline fails to precompile after adding font

Question

I'm trying to add a font to my Rails app this is what I've done:

Added fonts to:

-app
--assets
---fonts

SCSS:

@font-face {
  font-family: LigatureSymbols;

  src: font-url('LigatureSymbols211.eot');
  src: local('LigatureSymbols'),
       font-url('LigatureSymbols211.eot?#iefix') format('embedded-opentype'),
       font-url('LigatureSymbols211.woff') format('woff'),
       font-url('LigatureSymbols211.ttf') format('truetype'),
       font-url('LigatureSymbols211.svg#LigatureSymbols') format('svg');

  font-weight: normal;
  font-style: normal;
}

production.rb:

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.precompile += %w( .svg .eot .woff .ttf )

But when I push to my Heroku production server I get this:

-----> Preparing app for Rails asset pipeline
       Running: rake assets:precompile
       I, [2013-05-06T06:21:07.804043 #2036]  INFO -- : Writing /tmp/build_2snusxy9gm4d7/public/assets/LigatureSymbols211-c5b7db18fa0fcd910e92fee751776047.eot
       I, [2013-05-06T06:21:07.809822 #2036]  INFO -- : Writing /tmp/build_2snusxy9gm4d7/public/assets/LigatureSymbols211-09ff8be41a6bee98c834e9a278bb8b28.otf
       I, [2013-05-06T06:21:07.812685 #2036]  INFO -- : Writing /tmp/build_2snusxy9gm4d7/public/assets/LigatureSymbols211-1f682b1be252dbf6182d606a185b603f.svg
       I, [2013-05-06T06:21:07.819262 #2036]  INFO -- : Writing /tmp/build_2snusxy9gm4d7/public/assets/LigatureSymbols211-9e88765b872185b22e519da056cba9f0.ttf
       I, [2013-05-06T06:21:07.829518 #2036]  INFO -- : Writing /tmp/build_2snusxy9gm4d7/public/assets/LigatureSymbols211-a2d90ca6deff46bfcf9cade63d4902ce.woff
       I, [2013-05-06T06:21:07.838351 #2036]  INFO -- : Writing /tmp/build_2snusxy9gm4d7/public/assets/rails-5f9b3f343d9831cbf50b9bc980faf39b.png
       I, [2013-05-06T06:21:17.072501 #2036]  INFO -- : Writing /tmp/build_2snusxy9gm4d7/public/assets/application-6af5b81b9fcc820f1d43b4135f00317e.js
       rake aborted!
       undefined method `[]' for nil:NilClass
       (in /tmp/build_2snusxy9gm4d7/app/assets/stylesheets/application.css)

I tried to add a required line in my application.css but that wouldn't work either.

EDIT:

I can access localhost:5000/assets/LigatureSymbols-2.11.eot on my dev machine when running the server. Not sure if this might help narrow what's going wrong

EDIT 2:

The code works with the SCSS font commented out, is there a syntax error?

EDIT 3:

This is at the top of the trace stack:

.../sprockets-2.9.2/lib/sprockets/sass_functions.rb:63:in `sprockets_context'
.../sprockets-2.9.2/lib/sprockets/sass_functions.rb:42:in `font_url'

is there something wrong with my font-url calls?

EDIT 4:

Removed dashes from font filenames and changed scss to reflect, but same error persists

EDIT 5:

Generated CSS on local machine:

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

Answer 1

I found it out! Strangest thing... might be a bug in SASS.

If I put the code directly in the file home.css.scss which was required in my application.css, the error would occur.

Additionally, if I placed the font SCSS in a seperate file (font.scss) and @import "font" it would also raise an error.

Only if I required the font.scss file in my application.css would the asset pipeline pass.

It didn't matter if I used font-url(...) vs asset-url(...,font) vs url(asset-path(...,font)) They all work when the font was included via a =require in the application.css

Answer 2

Remove the hyphens. The assets pipeline uses hyphens for fingerprinting the assets and having hyphens in your font paths is causing issues.

Answer 3

I got exactly the same error when I forgot to change the file extension from .css to .scss. That fixed it for me.