1分で導入可能【Google Fonts(グーグルフォント)】の使い方!

CSS

googleフォントにアクセス

https://fonts.google.com/

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を反映させたい要素に。サイト全体に反映する場合は

これでOKです。

簡単に、しかも無料で反映できますので、ぜひお試しください!

最新情報をチェックしよう!