Menu
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; }
408
To compile your assets locally, run the assets:precompile task locally on your app. Make sure to use the production environment so that the production version of your assets are generated. A public/assets directory will be created. Inside this directory you'll find a manifest.
The clean it removes the old versions of the precompiled assets while leaving the new assets in place. Show activity on this post. rake assets:clean removes compiled assets. It is run by cap deploy:assets:clean to remove compiled assets, generally from a remote server.
1 What is the Asset Pipeline? The asset pipeline provides a framework to concatenate and minify or compress JavaScript and CSS assets. It also adds the ability to write these assets in other languages and pre-processors such as CoffeeScript, Sass, and ERB.
You have deployed your first Rails 6 application to Heroku. Here’s some recommended reading: Visit the Ruby support category to learn more about using Ruby and Rails on Heroku.
Ruby on Rails is a popular web framework written in Ruby. This guide covers using Rails 6 on Heroku. For information on running previous versions of Rails on Heroku, see the tutorial for Rails 5.x or Rails 4.x. For this guide you will need:
Following changes in the industry, Heroku has updated our default git branch name to main. If the project you’re deploying uses master as its default branch name, use git push heroku master. $ git push heroku main remote: Compressing source files... done. remote: Building source: remote: remote: -----> Building on the Heroku-20 stack remote: !
Note: The --without option on bundler is sticky. You can get rid of this option by running bundle config --delete without. Now you can fix it by making these Rake tasks conditional on the gem load. For example: Confirm it works locally, then push to Heroku. Congratulations! You have deployed your first Rails 6 application to Heroku.
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
115
Remove the hyphens. The assets pipeline uses hyphens for fingerprinting the assets and having hyphens in your font paths is causing issues.
35
I got exactly the same error when I forgot to change the file extension from .css to .scss. That fixed it for me.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
