はじめに

アプリ開発でフリーフォントを使用してデザインを変えたのでその使用方法をまとめました。

1 フリーフォントの準備

まず、フリーフォントサイトから自分が使用したいものをダウンロードします。
その後、ダウンロードしたファイル(拡張子ttfまたはotf)をapp/assets/fonts下に配置します。

フォントはそれぞれ利用条件が異なります。商用可能であっても利用できる範囲に制限があったり、使用時に報告が必要なものもありますので、ご利用の際には必ず配布ページをご確認ください。

CSSファイルに以下を記述します。


@font-face {
  font-family: “abcdefg”;
  src: url('/assets/abcdefg.ttf') format("truetype");
  font-weight: normal;
  font-style: normal;
}

フォントを適用したい箇所にfont-familyを指定します。


p {
  font-family; “abcdefg”;
}

これでフォントを適用することができました。

このままでは本番環境でフォントが適用されなかったため、以下を変更しました。

/config/production.rb

# 変更前
config.assets.compile = false
# 変更後
config.assets.compile = true

これにより本番環境で読み込まれていなかった画像ファイルも表示することができました。