5

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; }
Michael Johnston
  • 2,364
  • 2
  • 27
  • 48

4 Answers4

4

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

Michael Johnston
  • 2,364
  • 2
  • 27
  • 48
  • I added a not-very-well-received answer to the related issue here: http://stackoverflow.com/a/36539357/1965639 By changing the font.scss to font.css and including it differently, I solved the issue. @Michael Johnston pointed me in the right direction. – jjk Apr 11 '16 at 19:09
2

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

John
  • 4,362
  • 5
  • 32
  • 50
  • Renamed the files to `LigatureSymbols211` dot whatever and am still getting the same error. Thanks for the suggestion though! – Michael Johnston May 06 '13 at 06:23
  • Can you access the fonts at the expected url? i.e. something.com/fonts/LigatureSymbols211.eot or something.com/LigatureSymbols211.eot – John May 06 '13 at 06:35
  • On my local machine / dev server yes, I can access at `/assets/LigatureSymbols211.eot` and the other extensions. I tried on production server with a fingerprint before the pre compilation aborts, but it doesn't work – Michael Johnston May 06 '13 at 06:48
  • 1
    Actually, I just commented the SCSS out, the asset pipeline passes, and **was** able to navigate to the font on my production server at `/assets/LigatureSymbols211-c5b7db18fa0fcd910e92fee751776047.eot` The problem seems to lie in my `font-url` for some reason – Michael Johnston May 06 '13 at 06:56
  • I'd copy the production generated css and do a search for LigatureSymbols and see what it is generating as the url. At this point, I think font-url is the culprit as well. – John May 06 '13 at 07:07
  • I added what is generated in my CSS file to the main post. This is on my local server though, if I have the `font-url` statements in my SCSS, the production server won't update to show the css – Michael Johnston May 06 '13 at 07:11
2

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

Peter Loomans
  • 31
  • 1
  • 3
0

Add this to your config/application.rb 

config.assets.initialize_on_precompile = false

I have had similar issues with Heroku and this helped sometimes. It's worth a try. Let me know if that helped.

fontno
  • 6,642
  • 6
  • 36
  • 43