Google Fontsのファイルサイズを簡単に軽量化できる！日本語フォントにも対応

Google Fontsは英語フォントだけでなく日本語フォントもあり、すでに使用している人、もしくは使用を検討している人も多いと思います。その際に懸念されるのが、フォントファイルのサイズです。

フォントファイルのサイズを劇的に軽減できる機能があります。
パラメーターで使用する文字のみフォントファイルを読み込め、これによりフォントファイルのサイズを大幅に削減できます。

タイトルや見出しのみにGoogle Fontsを使いたい時にぴったりです。

Google Fonts -Optimizing your font requests

Google Chromeのエンジニア マネージャーであるAddy Osmani氏によると、CSSファイルにパラメーターを付けるだけで簡単にできる、とのことです。
日本語フォントにも対応しています！

Tip: Shave up to 90% off the size of Google Fonts requests by declaring only characters you need with &text: https://t.co/UNG4W0x01v pic.twitter.com/JQkoeQAgsX

— Addy Osmani (@addyosmani) February 17, 2020

フォントファイルを使用する文字のみにする方法は、簡単です。
まずは、Google Fontsを使用する時の標準的なコードを見てましょう。

使用する文字を指定するには「&text=」を加えるだけ、例えば「Hello」を指定するには下記のように記述します。

英語フォントだけでなく、日本語フォントにも対応しています。
さわらび明朝で試してみました。
※実際には日本語をURLエンコードする必要があります。

「さわらび明」だけさわらび明朝を使用します。
「さわらび明」だけ明朝体になっており、「朝」と似たような文字には適用されていないのが分かると思います。

コードは、下記の通りです。

どちらにも「.wf-sawarabimincho」を指定しており、通常はすべての文字がさわらび明朝で表示されますが、パラメーターを使用しているので「さわらび明」のみフォントファイルがロードされているのが分かります。

ファイルサイズも実際に計測してみました。
パラメーター無しのファイルサイズは、27.5KB
パラメーター有りのファイルサイズは、691B

5文字にしたので、97.5%軽量化されています！

ファイルサイズの比較、上:パラメーター無し、下:パラメーター有り

仕様では、すべてのクエリ文字列と同様に、値をURLエンコードする必要があります。

この機能は国際フォントでも機能し、UTF-8文字を指定できます。例えば、¡Hola！ は下記のように記述します。

text=を使用する場合、subset=パラメーターを指定する必要はありません。