【Rails6】カスタムフォントの使い方

3463 ワード
CSS Rails6 Rails font CSS テキストリンク

はじめに

先日、以下の記事を拝見しました。

フリーフォント好きに朗報！Fontworksから日本語フォント8書体がSILライセンスで公開、商用利用も完全に無料

こちらで紹介されている「クレーOne」が僕のRailsポートフォリオテーマの雰囲気にぴったりなフォントだったので導入してみました！

開発環境

  • MacOS Catalina 10.15.7
  • ruby 2.7.1
  • rails 6.0.3.4

フォントデータのダウンロード

GitHubからフォントデータをダウンロードします。
https://github.com/fontworks-fonts/Klee

フォントデータの場所
fonts/ttf/KleeOne-Regular.ttf

開発環境に配置

僕の開発環境ではCSSや画像ファイルなどをwebpackerで管理しているので、フォントデータも同じように配置しました。（※fontsフォルダは新規作成しています。）

app/javascript/fonts/KleeOne-Regular.ttf

なお、Rail5の環境でカスタムフォントを導入されている方の記事では、app/assets/fonts/ に配置されているようです。

フォントデータの読み込み

CSSファイルに以下を記述します。ファイルのパスは僕の環境の場合なので、みなさんの環境にあわせて読み替えてください。

app/javascript/stylesheets/custom.scss
@font-face {
  font-family: "kleeone";
  src: url('../fonts/KleeOne-Regular.ttf');
}
設定項目 設定値
font-family このフォントを使用する際のクラス名を好きな名前で名付けます
url フォントデータのパス（場所）

フォントデータのパスについてはCSSファイルからの相対パスになっています。

フォントデータの場所
app/javascript/fonts/KleeOne-Regular.ttf

CSSファイルの場所
app/javascript/stylesheets/custom.scss

CSSファイルのある stylesheetsフォルダから見て、フォントデータは1つ上の javascriptフォルダの中の fontsフォルダにあるので、 ../ で1つ上に上がってそこからのパスを記述しています。（../ は app/javascript と同義です。）

カスタムフォントの適用

実際に使用したい部分に記述します。僕はアプリケーション全体に適用したかったので、bodyタグに記述しました。

app/javascript/stylesheets/custom.scss
body {
  font-family: "kleeone"
}

見た目の違い

僕のポートフォリオでは仏像やお寺をテーマにしているのですが、それっぽい感じの雰囲気が出ていると思います。（笑）

適用前

適用後