More than 3 years have passed since last update.

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

Last updated at 2021-02-01Posted at 2021-01-30

はじめに

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

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

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"
}

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