フリーフォントをRailsに導入する方法
自作のポートフォリオにフリーフォントを導入したいと思い、Qiita記事を参考に導入しました。
今更感はありますが・・・備忘録かつ、
初学者の参考になればと思い、記事を作成しました。
筆者の環境
・Ruby 2.5.3
・Rails 5.2.2
1 フリーフォントのファイルをダウンロード
2 フォントファイルを app/assets/fonts 配下に置く
(app名)/app/assets/fonts
hogehoge.ttf ( または hoge.otf ) のようなフォントファイルを、fonts ディレクトリ内に入れます。
自分の場合はfontsディレクトリがなかったのでassets配下にmkdirで作成しました。
3 SCSSファイルに記述
SCSSに、
custom.scss
@font-face {
font-family: 'hoge'; # font-family名は適宜決定
src: font-url('hogehoge.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
このように記述します。
ファイル内のどこに記述してもよいです。
そして、
custom.scss
body {
font-family: hoge;
}
先ほどのfont-family名を
bodyに記述し、全体に適用させます。
4 完成！
この手順でフリーフォントを適用できているかと思います。
意外に簡単でしたね。
反映されない場合は、適宜サーバーをrestartなどしてみてください！