Googleフォントのサブセット化

ウェブサイトを作成する際にGoogleフォントを使用することは多いと思います。
ただ、日本語のGoogleフォントを実装することでウェブサイトが多少なりとも重くなりますよね。
スピードインサイトにも影響がでているようです。

そこで特定のテキストにのみ、Googleフォントを使用するということであれば
Googleフォントのサブセット化を行ったほうがサイトが軽くなるということがわかったので
今日はサブセットの方法をご紹介しようと思います。

p {
  font-family: 'Noto Sans JP', sans-serif;
}
<head>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap&text=ここにNoto Sans JPのフォントをあてる" rel="stylesheet">
</head>

<body>
 <p>ここにNoto Sans JPのフォントをあてる</p>
</body>

&text=をあててあげるだけでサブセット化が完了します!
特定の文字にのみ使用する場合は使えそうですね!

ぜひみなさんも試してみて下さい。