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

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

状況

手順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が効かないんだろうって、、、お疲れ様でした。

 

Leave a Reply

Your email address will not be published.

CAPTCHA