Google FontsはGoogleが提供してくれているフォント集みたいなものです。基本的に無料で使うことができ、使用方法も非常に簡単です。ぜひ活用していきましょう!
早速やってみよう
まずはこちらからサイトにアクセスしましょう!
アクセスしたら使用したいFontをクリックしましょう。ここではこのサイトでも使っている、Noto Sans Japaneseをクリックします。
スクロールすると下記画面が現れますので、使用したいfontの太さを選び、「Select this style」をクリックします。太さは1つだけではなく複数可能です。
クリックすると上記画面が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;
}
こんな感じです。簡単ですね! 是非有効活用していきましょう!