目的
Railsで作成したアプリにGoogle fontsを導入する。
開発環境
macOS: Big Sur
Rubyバージョン: 2.6.5
Railsバージョン: 6.0.0
前提
- アプリ
test-appが作成されている。 【Rails】簡単な投稿アプリの作成
手順
Google fontsとは
Google Fontsとは、Googleが提供している無料で利用できるWebフォントサービスです。
フォントの選定
まず下記HPから使用したいフォントを選定します。
Google fonts
日本語対応のフォントもあるので、好みに合わせて選定してください!
今回は「Noto Sans JP」というフォントを導入します!
コードのコピー
次に使用するフォントのコードをコピーします。
使用したいフォントの詳細ページに、青字で「＋ Select this style」と記載があるので、クリックします。
すると<link>と@importが選択できるので、@importを選択し、出てきた2つのコードをコピーします。
scssファイルの編集
先ほどコピーしたコードを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の導入は完了です。
コピペするだけで簡単にフォントの変更ができるので、ぜひ試してみてください。
では。