Follow Along as I Stumble on the Path to Learning RoR

Getting Font-Face to work with the Asset Pipeline

I use a custom font-face (from font squirrel) which is referenced in my CSS and I also have the font files stored within my app.  When I implemented the asset pipeline, the font-face was not read in because my fonts were not referenced correctly. After a lot of trial and error I found my answer.

(1) I had to install the sass-rails gem in my gemfile (https://github.com/rails/sass-rails)

(2) I needed to change my .css file to .css.sccs (http://guides.rubyonrails.org/asset_pipeline.html) to allow sass processing of the files (which allows the use of the sass helper methods ‘asset-path’ and ‘asset-url’ – see https://github.com/rails/sass-rails for helpers).  As a sidenote, it is recommended that for sass-rails you use @import (see gem page on github) instead of requirerequire_tree, and require_self (I left require_self) 

(3) I placed my fonts in app/fonts

(4) this post on Stack Overflow (http://stackoverflow.com/questions/7973271/using-font-face-with-rails-3-1-app) by Greg Stewart was how I needed to adjust my CSS (below).  

@font-face {
    font: {
       family: 'Junction';
       weight: 'normal';
       style: 'normal';
    }
    src: asset-url('Junction-webfont.eot', font);
    src: asset-url('Junction-webfont.eot', font) format('embedded-opentype'),
         asset-url('Junction-webfont.woff', font) format('woff'),
         asset-url('Junction-webfont.ttf', font) format('truetype'),
         asset-url('Junction-webfont.svg#JunctionRegular', font) format('svg')
}

(5) you may need to precompile your assets to get this to work – depending on if your app has config in application.rb as precompile = true (or false).  to precompile use this command:

bundle exec rake assets:precompile

(6) If you have trouble after this, you may need to add the fonts to the assets path by adding this to your application.rb file: 

config.assets.paths << "#{Rails.root}/app/assets/fonts"
Advertisements

Comments are closed.