問題
フォントを、vendor/assets/fonts
または、app/assets/fonts
の下において、読みたいが、読めない。
解決策1
CSSの中で直接URLを指定
src: url('http://...')
例えば、Bootstrapの場合は、263行目らへんが、v3.3.6では、..fonts/glyphicons...
となっているので、前のVersionのように、直接URLに変更すると、Productionでも正しく参照できる
bootstrap.css
@font-face {
src: url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff') format('woff'),
url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');*/
}
解決策2
vendor/assets/fonts
以下または、app/assets/fonts
以下に置いたものを読む。
注意点
- app/assets/stylesheets/application.cssをscssにして、sass-railsのメソッド(
font-path
)を使えるようにする。[https://github.com/rails/sass-rails] -
vendor/assets/fonts
を使う場合は、app/initilizers/assets.rbでassets.pathに Pathを追加する。 - .svg, .eot, .woff, .ttf, .woff2などPrecompileしたいフォントの拡張子をapp/initilizers/assets.rbで追加しておく
変更点
bootstrap.css
-@font-face {
- font-family: 'Glyphicons Halflings';
-
- src: url('../fonts/glyphicons-halflings-regular.eot');
- src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
-}
application.scss(application.cssから移動)
+// *= require bootstrap
+// その他Requireするもの
+// *= require_tree .
+// *= require_self
+
+@font-face {
+ font-family: 'Glyphicons Halflings';
+ src: url(font-path('glyphicons-halflings-regular.eot'));
+ src: url(font-path('glyphicons-halflings-regular.eot?#iefix')) format('embedded-opentype'),
+ url(font-path('glyphicons-halflings-regular.woff2')) format('woff2'),
+ url(font-path('glyphicons-halflings-regular.woff')) format('woff'),
+ url(font-path('glyphicons-halflings-regular.ttf')) format('truetype'),
+ url(font-path('glyphicons-halflings-regular.svg#glyphicons_halflingsregular')) format('svg');
+}
config/initializers/assets.rb変更点
+Rails.application.config.assets.paths << "#{Rails}/vendor/assets/fonts"
+Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf|woff2)\z/
最後に
注意した点
- config/environments/production.rbで
config.serve_static_files = true
になっているのを確かめる - 今回はローカルで確かめるために、ローカルで
rake assets:precompile RAIL_ENV=production
とrails s -e production
でできてるかどうかや、変更によってどれがprecompileされるかなど(Fontsファイル)を確認した。 - またurl(フォント.eot)などが実際にどういうURLになったかも、chromeのDeveloper toolsで確かめると助けになるかもしれない。