はじめに

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

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

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

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

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

@font-face{font-family:"kleeone";src:url('../fonts/KleeOne-Regular.ttf');}

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

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

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

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

カスタムフォントの適用

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

body{font-family:"kleeone"}

見た目の違い

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

適用前

適用後