日本語 Google Fonts をサブセット化して軽量に

はじめに

代表的な日本語 Google Font のひとつである Noto Sans JP をサブセット化することで軽量化し、Webサイトに設置する方法のメモ。

ちなみに、このサイトでは Web font は使ってはいません。サブセット化しても、普段使いするには、ちょっとリッチ過ぎるかなと。

Noto Sans JP とは？

Noto Sans JP には、漢字・ひらがな・カタカナを合わせて、全部で 6992文字が収録。 Google Fonts の公式サイトでは、1 億以上のウェッブサイトで利用されているとのこと。

方法

サブセット化

Google Fonts 公式サイト / Noto Sans JP のページにある「Download family」をクリックして、Noto_Sans_JP.zipをダウンロード。

日常的な文章であれば、ひらがな・カタカナ・句読点・基本的な記号群に加えて、使用頻度の高い漢字を集めたJIS第一水準の漢字を加えたこのようなサブセット（3669字）でオーケーかなと。

武蔵システムのサイトから、サブセットフォントメーカーと WOFFコンバータをダウンロード。

２つのアプリを使って、第一水準漢字に対する Google Fonts のサブセットを作り、作成したフォントを WOFF および WOFF2 形式で圧縮。

WOFF 形式とは何か？については、こちらを参照。

たとえば、Noto Sans JP Regular について、サブセット前のオリジナルのOTF形式ファイルと、比較のためにこれをWOFF圧縮してみてみたものでファイルサイズを調べてみると…

	size
`OTF`	4,548 kb
`WOFF`	3,912 kb
`WOFF2`	3,420 kb

第一水準漢字に対してサブセットを作り、圧縮したものは…

	size
`OTF`	721 kb
`WOFF`	596 kb
`WOFF2`	504 kb

サブセット化＆WOFF2圧縮したフォントファイルのサイズは、サブセット前のオリジナルの OTF ファイルに比べると、1/10 程度にまで減少。

ウェッブサイトに設置

たとえば、静的サイトジェネレーター Hugo で構築したサイトで利用する場合、変換した WOFF および WOFF2 形式のファイルをstatic/webfontsに置く。

スタイルシートの設定は、冒頭に下記の設定を追記。

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../webfonts/NotoSansJP-Regular.woff2") format("woff2"),
       url("../webfonts/NotoSansJP-Regular.woff") format("woff");
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: bold;
  font-weight: 700;
  font-display: swap;
  src: url("../webfonts/NotoSansJP-Bold.woff2") format("woff2"),
       url("../webfonts/NotoSansJP-Bold.woff") format("woff");
}

font-familyの基本的な設定は、次の通り。

font-family: 'Noto Sans JP', sans-serif;

評価

サブセット前

サブセット化せずに、下記の方法で Google Font をスタイルシートに指定。

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

ためしに、Google Chrome の Lighthouse で、サイトパフォーマンスを測定してみると…

サブセット後

手順で説明した方法でサブセット化＆圧縮した Google Font をスタイルシートに指定、Lighthouse で測定してみると…

まとめ

ひと手間（サブセット化＆圧縮の作業は３０分もあれば十分）は必要だし、サブセット化することで汎用性・可搬性は下がってしまうが、恩恵は大きい。

ただ、サブセット化したとしても、500 kb もあるので、気軽に普段使いはできないかなと。

Posted : 23.01.07