assetspipline
fonts
Rails4.2
production
precompile

rails 4.2で fonts をvendor/assets/fontsに追加してCSSから読む

More than 1 year has passed since last update.


問題

フォントを、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以下に置いたものを読む。


注意点


  1. app/assets/stylesheets/application.cssをscssにして、sass-railsのメソッド(font-path)を使えるようにする。[https://github.com/rails/sass-rails]


  2. vendor/assets/fontsを使う場合は、app/initilizers/assets.rbでassets.pathに Pathを追加する。

  3. .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=productionrails s -e productionでできてるかどうかや、変更によってどれがprecompileされるかなど(Fontsファイル)を確認した。

  • またurl(フォント.eot)などが実際にどういうURLになったかも、chromeのDeveloper toolsで確かめると助けになるかもしれない。