Railsに追加したGoogleFontsにBoldが効かず小一時間さまよった話

2022年6月23日

手順1

フォント選択

以下のサイトからM PLUS 1pのRegular 400を選択

https://fonts.google.com/

手順2

フォントを使用する設定

application.scssにM PLUS 1pのフォントを全体で使用するように指定

application.scss

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap');

font-family: 'M PLUS 1p', sans-serif;

手順3

ccsでフォントをBoldにしようとしても効かない

css

.logo {
  font-weight: bold;
}

結論から言うと、フォント選択の時に、Bold用のフォントも使うように設定するべきでした。

私が最初にimportしてたのは以下のurlですが、font-weightが400のもの、、、のみでした。

`@import url(‘https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap’);`

サイトにて、複数のフォントというか、font-weightが700のフォントも選択すると、importのurlが以下のように変化しました。

`@import url(‘https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;700&display=swap’);`

これでずっと悩んでました、、、なんでBoldが効かないんだろうって、、、お疲れ様でした。