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 127.0.0.1 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, Neil
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
Importing it into my Rails app was pretty easy. First, you create a folder called 'fonts' in your 'assets' folder. After that, you go shopping for fonts! After downloading one that catches your eye, simply drag it to your fonts folder.
Font Sub-DirectoryRight click on the app folder and then select New > Folder > Assets Folder. Keep the default Target Source Set and select Finish.
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.
If your Rails version is between > 3.1.0
and < 4
, place your fonts in any of the these folders:
app/assets/fonts
lib/assets/fonts
vendor/assets/fonts
For Rails versions > 4
, you must place your fonts in the app/assets/fonts
folder.
Note: To place fonts outside of these designated folders, use the following configuration:
config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/
For Rails versions > 4.2
, it is recommended to add this configuration to config/initializers/assets.rb
.
However, you can also add it to either config/application.rb
, or to config/production.rb
Declare your font in your CSS file:
@font-face { font-family: 'Icomoon'; src:url('icomoon.eot'); 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 your font is named exactly the same as in the URL portion of the declaration. Capital letters and punctuation marks matter. In this case, the font should have the name icomoon
.
If you are using Sass or Less with Rails > 3.1.0
(your CSS file has .scss
or .less
extension), then change the url(...)
in the font declaration to font-url(...)
.
Otherwise, your CSS file should have the extension .css.erb
, and the font declaration should be url('<%= asset_path(...) %>')
.
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 more clear.
Finally, use your font in your CSS like you declared it in the font-family
part. If it was declared capitalized, you can use it like this:
font-family: 'Icomoon';
Now here's a twist:
You should place all fonts in
app/assets/fonts/
as they WILL get precompiled in staging and production by default—they will get precompiled when pushed to heroku.Font files placed in
vendor/assets
will NOT be precompiled on staging or production by default — they will fail on heroku. Source!
— @plapier, thoughtbot/bourbon
I strongly believe that putting vendor fonts into
vendor/assets/fonts
makes a lot more sense than putting them intoapp/assets/fonts
. With these 2 lines of extra configuration this has worked well for me (on Rails 4):
app.config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts') app.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/
— @jhilden, thoughtbot/bourbon
I've also tested it on rails 4.0.0
. Actually the last one line is enough to safely precompile fonts from vendor
folder. Took a couple of hours to figure it out. Hope it helped someone.
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