ruby-on-rails - Heroku フォントアセットが機能しない

Question

配置されたフォントapp/assets/fonts

追加した

Add the fonts path
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

Precompile additional assets
config.assets.precompile += %w( .svg .eot .woff .ttf )

production.rb と development.rb で

次のような CSS でリンクされたフォント:

@font-face {
  font-family: 'Icomoon';
  src:url('/assets/icomoon.eot');
  src:url('/assets/icomoon.eot?#iefix') format('embedded-opentype'),
    url('/assets/icomoon.svg#icomoon') format('svg'),
    url('/assets/icomoon.woff') format('woff'),
    url('/assets/icomoon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

開発に取り組んでいるようです。しかし、HEROKUではうまくいかないようです。/assets/icomoon.eot が見つかりません。

このリンクの解決策は機能していないようです

Rails アセットパイプラインでのフォントの使用

score 31 · Accepted Answer

アセットパイプラインヘルパーではなく通常の古い css を使用してアセットを検索している場合、フォントなどのアセットは開発では機能しますが、運用では機能しません。Rails 4 では、アセットパイプラインに重大な変更が加えられ、人々がアセットを適切に使用し、アセットを参照する古い CSS メソッドを使用しないようになりました。

これを解決するには、新しいアセットパイプラインヘルパーを使用して、フォントのフィンガープリント化されキャッシュされたバージョンを指す必要があります。url（アセットパイプラインを使用しない）ではなく、（アセットパイプラインを使用font-urlする）を使用する必要があります。これを行うには、Sass を使用するか、スタイルシートに ERB を埋め込む必要がある場合があります。

例 (SCSS を使用):

@font-face {
  font-family: 'Icomoon';
  src: font-url("/assets/icomoon.eot");
  src: font-url("/assets/icomoon.eot?#iefix") format("embedded-opentype"), font-url("/assets/icomoon.svg#icomoon") format("svg"), font-url("/assets/icomoon.woff") format("woff"), font-url("/assets/icomoon.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

こちらをご覧ください: http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets

score 13 · Accepted Answer

この回答に対して寄せられたコメント (および不要な反対票) を考慮して、回答を次のように修正しました。

Rails は、assets フォルダー内のフォントを処理する方法を作成したようです。これは呼び出されfont-path、次のように機能します。

カスタムフォントを /assets/fonts フォルダーに追加すると、 font-pathヘルパーを使用してその中のファイルにアクセスできます。font-pathこれは、ヘルパーを使用してスタイルシートやその他のアセットで使用できます。

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

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

  ...
}

これは、プリコンパイルされたアセット (とにかく Heroku が行う) と静的アセットで機能します。これを実現するRails 4以前の方法が必要な場合は、以下の私の回答を参照してください。

こちらの Heroku で動作するフォントがあります: http://firststop.herokuapp.com (まだデモ中です)

そのための CSS は次のとおりです。

#assets/application.css
/*-- Akagi Font --*/
@font-face {
    font-family: 'akagi';
    src: url('fonts/akagi-th-webfont.eot'),
    src: url('fonts/akagi-th-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/akagi-th-webfont.woff') format('woff'),
         url('fonts/akagi-th-webfont.ttf') format('truetype'),
         url('fonts/akagi-th-webfont.svg#akagithin') format('svg');
    font-weight: 300;
    font-style: normal;

}
@font-face {
    font-family: 'akagi';
    src: url('fonts/akagi-bk-webfont.eot');
    src: url('fonts/akagi-bk-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/akagi-bk-webfont.woff') format('woff'),
         url('fonts/akagi-bk-webfont.ttf') format('truetype'),
         url('fonts/akagi-bk-webfont.svg#akagibook') format('svg');
    font-weight: 400;
    font-style: normal;

}
@font-face {
    font-family: 'akagi';
    src: url('fonts/akagi-sb-webfont.eot');
    src: url('fonts/akagi-sb-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/akagi-sb-webfont.woff') format('woff'),
         url('fonts/akagi-sb-webfont.ttf') format('truetype'),
         url('fonts/akagi-sb-webfont.svg#akagisemibold') format('svg');
    font-weight: 500;
    font-style: normal;

}

フォントを/stylesheets/fonts folder

すべての CSS を Heroku で動作させるために標準のプリコンパイルフォントを実行するだけで、動作します。あなたのパスは正しくないと思います。フォントディレクトリを /assets/stylesheets フォルダに移動してみてください:)

score 9 · Accepted Answer

実際、このコメントで提案されている解決策を試してみたところ、完全に機能しました。Herokuがアセットを正しく見つけるためには、プリコンパイル命令の正規表現を変更するだけでよいようです。

すなわちに変更config.assets.precompile += %w( .svg .eot .woff .ttf )しconfig.assets.precompile << /\.(?:svg|eot|woff|ttf)$/ます。

編集: Heroku のドキュメントに従って、rake タスクRAILS_ENV=productionを実行するときに追加する必要がある場合もあります。assets:precompile

score 3 · Accepted Answer

レール4

# config/application.rb
config.assets.paths << Rails.root.join("app", "assets", "fonts")
config.assets.precompile += %w(.svg .eot .woff .ttf)

# app/assets/stylesheets/foundation-icons.css.scss
@font-face {
  font-family: "foundation-icons";
  src: asset-url("foundation-icons.eot");
  src: asset-url("foundation-icons.eot?#iefix") format("embedded-opentype"),
       asset-url("foundation-icons.woff") format("woff"),
       asset-url("foundation-icons.ttf") format("truetype"),
       asset-url("foundation-icons.svg#fontcustom") format("svg");
  font-weight: normal;
  font-style: normal;
}

score 2 · Accepted Answer

すべての回答とコメントを組み合わせて問題を解決しました。私の例では Foundation Icon Fonts を使用しています。

application.rbファイルに次を追加します。

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

application.cssファイルの名前を次のように変更し、ディレクティブapplication.css.scssと使用します。font-urlasset-path

@font-face {
  font-family: "foundation-icons";
  src: font-url( asset-path("foundation-icons.eot") );
  src: font-url( asset-path("foundation-icons.eot?#iefix") ) format("embedded-opentype"),
       font-url( asset-path("foundation-icons.woff") ) format("woff"),
       font-url( asset-path("foundation-icons.ttf") ) format("truetype"),
       font-url( asset-path("foundation-icons.svg#fontcustom") ) format("svg");
  font-weight: normal;
  font-style: normal;
}

score 1 · Accepted Answer

.cssファイルの名前を.css.erbに変更します
url('/assets/icomoon.eot')すべてをurl(<%= asset_path 'icomoon.eot' %>)などに置き換えます。

font-url()css ファイルを SASS/SCSS に変換し、代わりにヘルパーを使用することで、同じ結果を得ることができますurl()。

私は Rails 4 でそれを試しましたが、あなたが production.rb/application.rb に追加したビットがなくても動作します。

score 1 · Accepted Answer

/assets/fonts/ディレクトリをに含める必要はありませんconfig.assets.paths。ドキュメントによると、app/assets、lib/assetsまたはに含まれるすべてのディレクトリvendor/assetsは自動的にロードされます。

http://guides.rubyonrails.org/asset_pipeline.html#asset-organization

app/assetsパイプラインアセットは、アプリケーション内の、lib/assetsまたはの 3 つの場所のいずれかに配置できますvendor/assets。

[...]

標準assets/*パスに加えて、追加の (完全修飾された) パスをのパイプラインに追加できますconfig/application.rb。

config.assets.paths << Rails.root.join("lib", "videoplayer", "flash")

Rails.application.class.config.assets.pathsコンソールで実行すると、内のすべてのディレクトリの配列が表示され/assetsます。別のディレクトリを追加してコンソールを再起動すると、そのディレクトリが自動的に配列内に含まれ、コンテンツがアセットとして提供されます。

config.assets.precompile += %w( .svg .eot .woff .ttf )js-css 以外のすべてのファイルは、デフォルトのマッチャー Proc によって既に含まれているため、必要ありません。

http://guides.rubyonrails.org/asset_pipeline.html#precompiling-assets

ファイルをコンパイルするためのデフォルトのマッチャーには、application.js、application.css、およびすべての非 JS/CSS ファイルが含まれます (これにはすべての画像アセットが自動的に含まれます)。

[ Proc.new { |path| !%w(.js .css).include?(File.extname(path)) }, /application.(css|js)$/ ]

すべての構成をデフォルトのままにして、フォントディレクトリのみを追加しapp/assets/、アプリをherokuにデプロイしてみてください。

ruby-on-rails - Heroku フォント アセットが機能しない

11 に答える 11

レール4

Related

Reference

ruby-on-rails - Heroku フォントアセットが機能しない