Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 812
pruett Avatar asked Nov 01 '11 21:11

pruett


1 Answers

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') %>'); 
like image 165
topek Avatar answered Sep 27 '22 19:09

topek