LoginSignup
6

More than 5 years have passed since last update.

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

Posted at

問題

フォントを、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で確かめると助けになるかもしれない。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6