始めて3ヶ月の初学者で、初投稿になります。
アウトプットを兼ねて投稿します。
どうぞお手柔らかにお願い致します!
間違いなどありましたらご指摘いただけるとありがたいです。
#はじめに
PF作成するにあたり、開発環境ではフォントが反映されるが本番環境では反映されなかった時のことを備忘録として書きたいと思います。
#1.カスタムフォント
カスタムフォントの素材をダウンロードしたらapp/assets/fonts以下にダウンロードしたカスタムフォントを保存します。
次にscssファイルを作成し、以下の記述を追加します。
@font-face{
font-family: 'フォントの名前';
src: asset_url('abcdefg.otf') format("truetype");
font-weight: normal;
font-style: normal;
}
###注意
ファイル名は、/assets/を含めないこと!
また、.otfの拡張子は適宜変更してください。
自分の場合はこれが一つの原因でプリコンパイルするときに先にapp/assetsを読み込んでしまっていました。
なのでデベロッパーツールで反映されてない本番環境を検証してみるとnot foundと出るはずです。
そのため、/assets/を含めずにファイル名のみの記述です。
#2. 本番環境への適応
30行目でfalseをtrueにします。
config.assets.compile = true
#3.拡張子を許可してあげる
デフォルトのままだとjs,cssしか読み込まないので14行目でコメントアウトを外して他の拡張子を許可してあげる。
(自分の場合は.otfでした)
ちなみに11〜13行目のコメントアウトは説明文とのこと。
Rails.application.config.assets.precompile += %w(*.otf)
この方法で本番環境に反映されていることを確認できました!
#参考記事
以下、参考にさせていただきました。
https://qiita.com/iwkmsy9618/items/98a01373f68887055f21