🔔
Bootstrapsのデフォルトフォントを変える方法:Rails版
Railsでアプリ作成する際、よくBootstrapを利用しています。
その際に、デフォルトのフォントからGoogle Fontsのかっこいいフォントへ変更したかったが、一発で出来ませんでした。なぜできなかったかについて覚え書きです。
環境:
Mac OS:Big Sur11.12.3
Bootstrap5
Rails 6.0.3.6
BootstrapではReboot.cssを使用し、各OSでデフォルトフォントが設定されています。
Reboot.cssのおかげで、私が使用したかったGoogle fontを適用できません。
1. Google Fontを選ぶ
ここから好きなフォントを選んでください。
フォントを選ぶと以下の画面に飛びます。
お気に入りのスタイルを指定すると、右側面にウィンドウが表示されます。
Use on the webの
@import〜から始まる文字列
# Noto Sans JPを選んだ場合
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
CSSの
# Noto Sans JPを選んだ場合
font-family: 'Noto Sans JP', sans-serif;
それぞれをコピー!!
2.アプリ内にフォント指定するためのコードを追加
#追加
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
#追加
body {
font-family: "Noto Serif JP", serif !important;
}
これで完了です。
ネットワークの通信ログ(Google Chrome)を読むと
Reboot.css→application.scssの順で読み込まれることが分かります。
Discussion
こんにちは!Googleフォント関係なくfont-familyが効かなくてこまってたのですが、シンプルに
application.css
ではなくapplication.scss
の方に記述すれば適用されるのですね!