Google Fontsで必要な文字のフォントだけを読み込ませる

Web フォントに「 Google Fonts 」を導入している人は多いと思いますが、複数のフォントを使用しているとファイルサイズが肥大化し、表示速度に影響を及ぼしてしまいます。
そんな Google Fonts では、導入するための link コードにパラメータを追加することで、読み込みファイルの軽量化を図ることができます。

コードにパラメータを追加して軽量化

通常、サイトタイトルなど一部に指定したフォントは、使用していない文字のフォントまで読み込んでいる状態です。つまり、使用している文字のフォントだけを読み込めば、ファイルサイズを劇的に軽量化できるというわけです。

追加するパラメータ

Google Fonts の link コードに以下のパラメータを追加して完了です。
***** の部分には対象とする文字を記述します。
&text=*****
例として下記のようにすれば、「 MERMONA 」のフォントだけが読み込まれます。大文字と小文字は別ものなので、記述したとおりのフォントが読み込まれると考えてください。また、ここでは文字が重複しても大丈夫です。
<link href='https://fonts.googleapis.com/css?family=Marcellus&display=swap&text=MERMONA' rel='stylesheet'>
サイトタイトルや見出しなど、わずか数文字のためにすべてのフォントを読み込む必要はないので、負担を軽減させるためにもパラメータの追加をしておくのがいいかもしれません。