Search code examples
cssruby-on-rails-3.1font-facesass

Using @font-face with Rails 3.1 app?

I'm having trouble using the following @font-face declaration to work with my Rails 3.1 app. I put the fonts in the Asset Pipeline in its own folder called "Fonts" alongside images and stylesheets and javascripts

Here is the declaration I used (generated by Font Squirrel.)

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

Anyone successfully utilize @font-face on their Rails 3.1 app?

Update

I just read this thread http://spin.atomicobject.com/2011/09/26/serving-fonts-in-rails-3-1/ that said to change url to font-url in the declarations. That didn't seem to work either unfortunately.

Solution

  • You have to add the folder to the assets path (to file config/application.rb), see Rails Guides

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

    And you should use the asset_path helper:

    src: url('<%= asset_path('Chunkfive-webfont.eot') %>');