。ザワくんブログ

。ザワくんブログ

Google Fontsを使おう!

投稿日:2021/9/21

google fontを使おう

Google FontsはGoogleが提供してくれているフォント集みたいなものです。基本的に無料で使うことができ、使用方法も非常に簡単です。ぜひ活用していきましょう!

早速やってみよう

まずはこちらからサイトにアクセスしましょう!
アクセスしたら使用したいFontをクリックしましょう。ここではこのサイトでも使っている、Noto Sans Japaneseをクリックします。

Noto Sans Japaneseページ

スクロールすると下記画面が現れますので、使用したいfontの太さを選び、「Select this style」をクリックします。太さは1つだけではなく複数可能です。

Noto Sans Japaneseページ

クリックすると上記画面がPCで右側に出てきます。ここでは@importを使用しましょう!
linkと@importと並んでいるので、@importをクリックし下に現れた@import url… をコピーしましょう。またその下のfont-familyもコピーしておきましょう。

CSSで読み込む

あとはCSSで読み込むだけです。

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

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

こんな感じです。簡単ですね! 是非有効活用していきましょう!