[解決済み] Railsのアセットパイプラインでフォントを使用する

質問

Scssファイルで、いくつかのフォントを以下のように設定しています。

@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');
}

実際のフォントファイルは、/app/assets/fonts/に格納されています。

私は config.assets.paths << Rails.root.join("app", "assets", "fonts") を application.rb ファイルに追加します。

で、コンパイルCSSのソースは以下の通りです。

@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");
}

しかし、アプリを実行すると、フォントファイルが見つかりません。ログを見ると

2012-06-05 23:21:17 +0100 に 127.0.0.1 の GET "/assets/icoMoon.ttf" が開始されました。 アセット /icoMoon.ttf を送信 - 404 Not Found (13ms)

なぜアセットパイプラインは、フォントファイルを/assetsだけにフラット化しないのですか？

何か思い当たることはありますか？

よろしくお願いします。 ニール

おまけ情報

rails consoleでassets pathsとassetprecompileを確認すると、以下のようになります。

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

解決方法は？

1. Railsのバージョンが > 3.1.0 と < 4 を選択し、これらのフォルダのいずれかにフォントを配置します。

   • app/assets/fonts
   • lib/assets/fonts
   • vendor/assets/fonts

   
   

   Railsバージョンの場合 > 4 を使用すると 必須 にフォントを配置します。 app/assets/fonts フォルダーに格納されます。

   注意事項 これらの指定されたフォルダー以外の場所にフォントを配置するには、以下の設定を使用します。

   config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/

   Railsのバージョンの場合 > 4.2 であれば、それは 推奨 にこの設定を追加します。 config/initializers/assets.rb .

   しかし、どちらかに追加することも可能です。 config/application.rb または config/production.rb

2. CSSファイルでフォントを宣言してください。

   @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;
   }
   
   

   フォントの名前は、宣言のURL部分と全く同じになるようにします。大文字と句読点が重要です。この場合、フォントの名前は icomoon .

3. RailsでSassやLessを使っている場合 > 3.1.0 (あなたのCSSファイルには .scss または .less の拡張子) を変更し、次に url(...) をフォント宣言の font-url(...) .

   そうでない場合は、CSS ファイルの拡張子が .css.erb で、フォント宣言は url('<%= asset_path(...) %>') .

   Railsを使用している場合 > 3.2.1 を使用することができます。 font_path(...) の代わりに asset_path(...) . このヘルパーは全く同じことをするのですが、より分かりやすくなっています。

4. 最後に、CSS でフォントを宣言したように使用します。 font-family の部分です。大文字で宣言されている場合は、このように使用することができます。

   font-family: 'Icomoon';