Google Fontsで必要な文字だけを読み込むようにして軽量化する方法
Google Fontsで必要な文字だけを読み込む記述方法
Google Fontsを利用しているページでは、フォントのデータを毎回やりとりすることになるので通信量の軽量化をしたい場合も出てきます。
特に、日本語のフォントの場合は文字数が多いのでフォントのデータ量が大きくなってしまいます。
そのような場合に有効な方法の一つとして、使用する文字だけをGoogle Fontsから読み込ませて軽量化する方法をご紹介します。
ロゴだけにGoogle Fontsを使用している場合など、使用する文字数が少ないときには、このような記述を使用することで通信データの軽量化を図ることができます。
ここからは、具体例として”Saku’s Diary”という文字列をGoogle Fontsを使ってロゴのように表示する場合の記述方法をご紹介します。ここではOdibee Sansというフォントを使ってみました。
読み込む文字を制限する時の記述方法としてはHTMLのheadタグ内のGoogle Fontsを読み込む記述に少し変更を加えます。
<!-- 通常のGoogle Fonts読み込みの記述 --> <link href="https://fonts.googleapis.com/css?family=Odibee+Sans&display=swap" rel="stylesheet">
<!-- 必要な文字だけ読み込ませる時の記述 -->
<link href="https://fonts.googleapis.com/css?family=Odibee+Sans&display=swap&text=Saku's Diary" rel="stylesheet">
黄色い線を引いた部分だけが通常の記述と異なります。このように使用する文字だけを”&text=”と一緒に付け足すことで読み込む文字を制限して軽量化することができます。
注意点としては、大文字と小文字は使う文字をそれぞれ分けて指定する必要があることや、記号やスペースなども使うものは指定する必要があります。
なお、重複する文字がある場合は１回だけ指定すればよいので、次のように省略した記述でも大丈夫です。
<!-- "a"の文字は二回使われているので、二つ目は省略できます -->
<link href="https://fonts.googleapis.com/css?family=Odibee+Sans&display=swap&text=Saku's Diry" rel="stylesheet">
関連記事
今回紹介した例と違って、Webフォントをページ全体に使用したい場合などは下記のページで紹介する方法が適していると思います。
Webフォントを軽量化（サブセット化）してセルフホスティングで読み込ませる方法
ページの読み込み速度を改善するために、軽量化（サブセット化）したWebフォントを自分のサーバーにアップロードしてWebページで読み込ませる（セルフホスティング）方法について紹介していきます。
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
コメントを残す