googleフォントにアクセス
google Fontsにアクセスしてください。
使ってみたいフォントをクリック!
今回はNoto Sansを使ってみます。
使いたいWeight(太さ)を選択!
私は基本的にどのフォントでも400 700 900の三種類を選択しています。たくさん選択するとサイトが重くなってしまうので、基本は必要なものだけで大丈夫です。
CSSシートに貼り付け
動画で超簡単に説明
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');
この部分をcss スタイルシートの一番上に
font-family: 'Noto Sans JP', sans-serif;
この部分はfontを反映させたい要素に。サイト全体に反映する場合は
1 2 3 |
body{ font-family: 'Noto Sans JP', sans-serif; } |
これでOKです。
簡単に、しかも無料で反映できますので、ぜひお試しください!