LoginSignup
0
1

More than 1 year has passed since last update.

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

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

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

やったこと
- scssファイル編集
- yarnのインストール
- プリコンパイル

scssファイルの編集

編集前
_fonts.scss
@font-face {
font-family: "Koruri-Semibold";
src: asset_url('assets/Koruri-Semibold.ttf') format("truetype");
font-weight: normal;
font-style: normal;
}

編集後
_fonts.scss
@font-face {
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