#はじめに
個人アプリを作成する際にカスタムフォントを使用して文字のデザインを変更したので、その方法についてと本番環境でカスタムフォントが適用されなかったので本番環境で適用させる方法について書きたいと思います。

#カスタムフォントについて
まずはカスタムフォントを取り扱っているサイトから素材をダウンロードしapp/assets/fonts以下にダウンロードしたカスタムフォント(拡張子は主に.ttf)を保存します。
次にcssファイルを作成し、以下の記述を追加します。

font.scss

@font-face {
  font-family: "名前";
  src: url('ファイル名') format("truetype");
  font-weight: normal;
  font-style: normal;
}

後は適用したいcssのクラスにfont-familyを追加すればOKです。

test.scss

.title {
    font-family: "名前";
  }

必要な場合はapplication.scssにて@importでファイルを読み込ませるのを忘れずに

#本番環境でも適用させる場合
この記述だと本番環境ではカスタムフォントが適用されない為、urlの所をsrc: asset_urlを指定する事で本番環境でも適用させる事が出来ます。

font.scss

@font-face {
  font-family: "名前";
  src: asset_url('ファイル名') format("truetype");
  font-weight: normal;
  font-style: normal;
}

#まとめ
画像もURLを正しく指定しないと本番環境にて読み込まれないですが、カスタムフォントも同様に指定しないと読み込まれないのははじめて知りました。今回はこの一文を修正するだけで上手くいったのでよかったです。

以下、参考にさせて頂いた資料です。
https://codeday.me/jp/qa/20190222/302271.html