先月、Google Fontsに正式に追加された日本語フォントが表示の高速化が期待できるよさげな仕様になっています。

Google Fonts (日本語で絞り込み)

日本語Webフォントを自社のWebサーバーから配信していたり、Google Fontsの日本語フォント早期アクセスを利用しているサイトは乗り換えを検討しましょう！

Webデータ肥大化の伏兵Webフォント

たいていのWebページで最も多くの容量を占めているのは画像ですが、最近は画像より日本語Webフォントの方が重たいというサイトも増えてきました。

日本語フォントはご存じの通り、文字の種類がとても多いので相当なデータ量になります。Webページの表示高速化にはWebフォントへの考慮も重要です。

無造作に配信すると4.3MB！

人気のNoto Sans JPを無造作にフルセットで配信すると4.3MBにもなるそうです。しかもそれだけだと太字フォントが含まれません。太字にも対応させるためにはさらに4.4MB(合計8.7MB！)のファイルをユーザーにダウンロードさせる必要があります。

Noto Sans の Web Font 対応とサブセットによる最適化

一般的にダウンロードが終わるまでは代替フォントが表示されますが、Googlegが推奨する1.6MB(ページ全体)に対してあまりに大富豪すぎるデータ量です。

だから最低限、使用頻度の高い文字だけ抽出したフォントファイルを再構成する必要があります。

そんな楽そうで楽ではない日本語フォントですが、ついにGoogle Fontsでの正式対応が始まったという記事があったので調べてみました。

Google Fontsが日本語WEBフォントを正式サポート

Google Fonts正式版では細切れのフォントファイルをHTTP/2で配信

上記の記事によると、Google Fontsでは大きな日本語フォントを分割ダウンロードさせているということです。Noto Sans JP用のCSSを直接見てみましょう。

https://fonts.googleapis.com/css?family=Noto+Sans+JP

確かに細かく分割されている！

最初の@font-feceには128文字分のフォントが含まれており、全体で120個の@font-face(Webフォントファイル)に分割されています。

こうすることで並列ダウンロードが可能になります。しかも各WebフォントファイルはHTTP/2で配信されています。HTTP/2は複数のファイルをストリーミング的にブラウザに送ることができます。Google FontsはWebフォントのストリーミング配信を実現したと言ってもよさそうです。

日本語フォント早期アクセスから何が変わったか

Google Fontsでは以前から日本語フォントを配信していましたが、早期アクセスという扱い(ベータみたいな感じ？)でした。

Google Fonts + 日本語 早期アクセス

この早期アクセスで配信されているNoto Sans JapaneseのCSSが以下です(Noto Sans JPとNoto Sans Japaneseは厳密には別ものらしいですが参考まで)。

https://fonts.googleapis.com/earlyaccess/notosansjapanese.css

こちらはfont-weight: 100〜900としてそれぞれ1ファイルを参照しています。分割ストリーミングはされていません。例えば NotoSansJP-Regular.woff2 は約1.56MBです。4.3MBからかなりサブセット化されているようですが、やはりなかなかの容量です。

以上の調査からGoogle Fontsの日本語フォント正式版に多くの改善点や優位性があるとわかりました。

もっとページに合わせた最適化による高速化を図るためには、FONTPLUSのサービスを利用する方法もあります。