CSS

GoogleフォントのNoto Sans Japaneseをcssで使う方法

  /

GoogleフォントのNoto Sans Japaneseを「head内にlinkタグで読み込んで表示する方法」と「style内に@importで読み込んで表示する方法」をご紹介します。

Contents
  1. GoogleフォントNoto Sans Japanese
  2. Noto Sans Japaneseをhead内にlinkタグで読み込んで表示する方法
  3. Noto Sans Japaneseをstyle内に@importで読み込んで表示する方法

GoogleフォントNoto Sans Japanese

GoogleフォントNoto Sans Japaneseの参照元は以下のサイトで確認できます。
利用するフォントの太さだけ選択して利用できます。
Noto Sans Japanese

Noto Sans Japaneseをhead内にlinkタグで読み込んで表示する方法

headタグ内に以下を記述します。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">

　
styleタグまたはcssファイル内に以下を記述します。
※font-family以外は必要に応じて変更して下さい。

body{
  font-family: 'Noto Sans JP', sans-serif;
  padding: 0;
  margin: 0;
  font-size: 30px;
  text-align: center;
}

GoogleフォントNoto Sans Japaneseをhead内にlinkタグで読み込んで表示するデモページ

GoogleフォントNoto Sans Japaneseをhead内にlinkタグで読み込んで表示するデモ

Noto Sans Japaneseをstyle内に@importで読み込んで表示する方法

styleタグまたはcssファイル内に以下を記述します。
※font-family以外は必要に応じて変更して下さい。

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

body{
  font-family: 'Noto Sans JP', sans-serif;
  padding: 0;
  margin: 0;
  font-size: 30px;
  text-align: center;
}

GoogleフォントNoto Sans Japaneseをstyle内に@importで読み込んで表示するデモページ

GoogleフォントNoto Sans Japaneseをstyle内に@importで読み込んで表示するデモ

　
※Googleフォントってhead内にlinkタグで読み込む方法とstyle内に@importで読み込む方法どちらが良いとかってあるのでしょうか？どちらでも良いとは思いますが、流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

googlefonts notosansjp googleフォント
RELATED POST