0
1

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.

カスタムフォントが本番環境で適用されない

Posted at
  • 初心者かつ初投稿なので読みにくいと思いますが、容赦ください

####デプロイしたがカスタムフォントが適用されていなかった
やったこと

  • scssファイル編集
  • yarnのインストール
  • プリコンパイル

######scssファイルの編集
編集前
_fonts.scss

  font-family: "Koruri-Semibold";
  src: asset_url('assets/Koruri-Semibold.ttf') format("truetype");
  font-weight: normal;
  font-style: normal;
}

編集後
_fonts.scss

  font-family: "Koruri-Semibold";
  src: asset_url('Koruri-Semibold.ttf') format("truetype");
  font-weight: normal;
  font-style: normal;
}

chromeの検証ツールのエラー文を見ると、not foundとなっていたので、ファイルのパスが間違っているのではないかと思った。
調べると、本番環境では画像やフォントのファイルはassetsではなくpublicフォルダの中へ格納されると書いてあったので、パスからassetsをのぞきフォントファイルのみの指定にした。
開発環境でも問題なく適用されるのを確認済み

#####yarnのインストール
プリコンバイルする際、yarnが入ってないよというエラー?がec2のターミナルに表示されていたので、
sudo npm install yarn -g
でyarnをインストール

######プリコンパイル
その後改めて
bundle exec rails assets:precompile RAILS_ENV=production
することで無事、本番環境でもカスタムフォントを適用させられました。

######参考にさせていただいた記事
EC2にてnpm install yarn -gが失敗する

0
1
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
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?