GoogleフォントのNoto Sans Japaneseを「head内にlinkタグで読み込んで表示する方法」と「style内に@importで読み込んで表示する方法」をご紹介します。
Contents
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アナリティクスタグは流用しないで下さい。
ディスプレイ広告