Help us understand the problem. What is going on with this article?

[Rails]カスタムフォントの使用方法

はじめに

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

カスタムフォントについて

まずはカスタムフォントを取り扱っているサイトから素材をダウンロードし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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away