RailsでCustom Web fontを使う

icomoonなどのCustom web fontをrailsで使う方法です。

Web fontの配置

|-app/
|---assets/
|-----fonts/
|-----images/
|-----javascripts/
|-----stylesheets/

こんな感じで配置。

asset のpathに追加

app/config/initializer/assets.rb

Rails.application.config.assets.paths << Rails.root.join("app", "assets", "fonts")

scssの編集

@font-face {
  font-family:'icofonts';
  src:font-url('icofonts.eot');
  src:font-url('icofonts.eot?#iefix') format('embedded-opentype'),

  ...
} 

ポイントはcssでいうところのsrc:url()をsrc:font-url()にすることです。

あとはunicornとかの再起動すれば反映されます。

参考

Custom Web Fonts and the Rails Asset Pipeline