☔

Google Fontsは使用する文字を絞り込んでダウンロードできる

2020/10/19に公開

CSS

HTML 5

tech

結論

Google Fonts APIはGETパラメータに text=文字 を指定すると使用する文字を絞り込めます。
詳細はドキュメントにあります。ドキュメントをお読みください。

Google Fonts とは

Webフォントを使用する際、第一選択に上がるのがGoogle Fontsです。
WebページでNoto Sans JPを使いたい場合、以下のようにlinkタグを追加してCSSでfont-familyを指定すれば、どのような環境でもNoto Sans JPで文字を表示させられます。

<!-- 太さ400のNoto Sans JPフォントを読み込む -->
<link
  href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap"
  rel="stylesheet" />

<style>
  body {
    font-family: 'Noto Sans JP';
  }
</style>

とても便利です。しかし、この方法だとそのページで使われていない不要な文字のフォントデータも読み込んでしまいます。
ある程度長い文章に適用するなら問題になりませんが、サイトロゴなどの短い文字列だけで使用したいフォントの場合、ダウンロードしたデータのほとんどが無駄になってしまいます。

使用する文字だけダウンロードする

Google Fonts APIはGETパラメータに読み込み文字を指定することで、必要な分だけダウンロードさせることができます。
サイトロゴが「こんにちは」だとすれば、Google Fontsの読み込みURLを以下のように指定します。

<!-- 太さ400のNoto Sans JPフォントを「こんにちは」だけ読み込む -->
<link
  href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap&text=こんにちは"
  rel="stylesheet" />

URLの末尾にGETパラメータとして text=こんにちは を追加しました。
こうするとGoogle Fonts APIが「こんにちは」で使う分だけのフォントデータを渡してくれるようになります。データ量が大きく減るため、初回アクセス時の表示速度改善が見込めます。

詳しくは公式ドキュメントをお読みください。

おわりです。

結論

Google Fonts とは

使用する文字だけダウンロードする

Discussion