3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[Rails]デプロイした時にカスタムフォントが反映されない不具合

Posted at

始めて3ヶ月の初学者で、初投稿になります。
アウトプットを兼ねて投稿します。
どうぞお手柔らかにお願い致します!
間違いなどありましたらご指摘いただけるとありがたいです。

#はじめに
PF作成するにあたり、開発環境ではフォントが反映されるが本番環境では反映されなかった時のことを備忘録として書きたいと思います。

#1.カスタムフォント
カスタムフォントの素材をダウンロードしたらapp/assets/fonts以下にダウンロードしたカスタムフォントを保存します。
次にscssファイルを作成し、以下の記述を追加します。

font.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/environments/production.rb
config.assets.compile = true

#3.拡張子を許可してあげる
デフォルトのままだとjs,cssしか読み込まないので14行目でコメントアウトを外して他の拡張子を許可してあげる。
(自分の場合は.otfでした)
ちなみに11〜13行目のコメントアウトは説明文とのこと。

initializers/assets.rb
Rails.application.config.assets.precompile += %w(*.otf)

この方法で本番環境に反映されていることを確認できました!

#参考記事
以下、参考にさせていただきました。
https://qiita.com/iwkmsy9618/items/98a01373f68887055f21

3
5
0

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
3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?