More than 3 years have passed since last update.

【Rails】Google fontsの導入

Posted at 2021-05-31

目的

Railsで作成したアプリにGoogle fontsを導入する。

macOS: Big Sur
Rubyバージョン: 2.6.5
Railsバージョン: 6.0.0

Google Fontsとは、Googleが提供している無料で利用できるWebフォントサービスです。

まず下記HPから使用したいフォントを選定します。
Google fonts

日本語対応のフォントもあるので、好みに合わせて選定してください!

今回は「Noto Sans JP」というフォントを導入します!

次に使用するフォントのコードをコピーします。
使用したいフォントの詳細ページに、青字で「＋ Select this style」と記載があるので、クリックします。
すると<link>と@importが選択できるので、@importを選択し、出てきた2つのコードをコピーします。

先ほどコピーしたコードをscssファイルに貼り付け、Google fontsを導入します!

app/assets/application.scss

/*省略*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

 * {
  font-family: 'Noto Sans JP', sans-serif;
}

今回はすべてのページに反映させたいので、fint-family～をapplication.scssに記述しています。
ページごとでフォントを使い分けたい場合は、その都度cssファイルに書いていきます。

フォントの変更が適用されているかブラウザで確認します。
無事にフォントが変更されていれば成功です！

以上でGoogle fontsの導入は完了です。
コピペするだけで簡単にフォントの変更ができるので、ぜひ試してみてください。
では。