はじめに
2017年4月に Google と Adobe による共同開発フォント「Noto Sans CJK（源ノ明朝）」が発表されました。
さっそくサイトでも使いたいところですが、そのままでは1ウェイトあたり約23MBもあるのでユーザーにかなりの負担を強いてしまいます。そこでサブセットを作ることにしました。
ここで言う「サブセット」とは必要な文字だけを抜き出したフォントファイルのことです。
サブセットフォントメーカーは使わない
以前は武蔵システムさんの「サブセットフォントメーカー」という大変素晴らしいツールを使っていましたが、OpenTypeFontの情報をごっそり削ってしまいます。そのため CSS の font-feature-settings:palt; を用いた字詰めが出来ないのです。
上の図は font-feature-settings:palt; を指定した状態です。サブセットフォントメーカーで作った Noto Serifは等幅として扱われているのがわかります。
pyftsubset を使えば大丈夫
Python の fontTools に含まれる pyftsubset を使えば解決できるようです。
基本的には下記の記事が詳しいです。というかこの記事は下記の記事のコピペ＋メモみたいなものですｗ
≫日本語フォントのOpenType機能を維持するサブセット化
出力は WOFF/WOFF2形式のみ
以前はIE対策として EOT形式を使っていましたが、IE9からは WOFF に対応したので WOFF/WOFF2 のみ出力します。Android4系に対応するなら TrueType形式が必要ですが……もういいですよね？
この記事は OS X を対象としています。
準備編
「すでに pip 使えるぜー」という人は「実践編」に進んで下さい。
Python インストール
OS X には標準で Python がインストールされていますが、EL Capitan以降は後述するツールをインストールする時に権限のエラーが発生します。ですので Homebrew を使ってユーザー領域に別の Python をインストールします。
Homebrew をアップデートした後に Python をインストールします。アップデートはちょっと時間がかかります。
$ brew update
$ brew install python
Python インストールの確認
まずは初期状態の Python の場所です。
$ which python
/usr/bin/python
Homebrew を使ってインストールすると下記の場所になります。
$ which python
/usr/local/bin/python
pip のアップデート
Homebrew でインストールした Python には標準で pip が入っているので、アップデートだけでOKです。
$ pip install --upgrade pip
参考：macOS SierraでPythonのパッケージマネージャ「pip」でインストールできない時の対処法
実践編
fontTools のインストール
fontTools は Python を使ってフォントをいろいろやっちゃおうぜーというツールらしいです（よく知らない）。
pip を使ってインストールします。
https://github.com/fonttools/fonttools
$ pip install fonttools
Successfully installed fonttools-3.9.2
Brotli のインストール
WOFF2形式を出力するために必要なのでインストールします。圧縮関係なライブラリ？
$ git clone https://github.com/google/brotli
$ cd brotli
$ python setup.py install
Noto Serif CJK JP をダウンロード
ダウンロードページに行きます。検索ボックスに Noto Serif CJK JP と入力して絞り込みます。あとはダウンロード！
サブセットフォント作成！
fontTools に含まれている pyftsubset というツールを使ってサブセット化＞WOFF変換をまとめて行います。
$ pyftsubset NotoSerifCJKjp-Regular.otf --text-file=subset.txt --layout-features='*' --flavor=woff --output-file=NotoSerifCJKjp-Regular-sub.woff
--flavor=woff2 にして、出力ファイル名も「.woff2」にして WOFF2形式を出力します。
$ pyftsubset NotoSerifCJKjp-Regular.otf --text-file=subset.txt --layout-features='*' --flavor=woff2 --output-file=NotoSerifCJKjp-Regular-sub.woff2
ファイルサイズを比較してみました。オリジナルが約23MB。サブセットが約2MBです（それでも大きいと言われそうですが）。
-rw-r--r-- 1 dada staff 2304772 4 14 14:14 NotoSerifCJKjp-Regular-sub.woff
-rw-r--r-- 1 dada staff 1971056 4 14 14:21 NotoSerifCJKjp-Regular-sub.woff2
-rw-r-----@ 1 dada staff 23607780 4 3 13:40 NotoSerifCJKjp-Regular.otf
今度は字詰めが有効になりました！
最初の例と太さが違うのは、最初 SemiBold で試して、次に Regular を試したためです。
解説編
サブセットに含める文字は第一水準＋α
--text-file=subset.txt でサブセットに含める文字をテキストファイルで指定します。自分の場合は第一水準＋下記の文字を入れています。
櫻燿璐廣會慄蘆跋扈殲憑吼祀侑澤翔栫閻
以前作ったサイトで必要だったの文字です。なんとなく作品内容が見えてきますね。
参考：Noto Sans CJK JP フォントをダウンロードしてサイトに適用する手順
font-feature-settings を個別に指定できる
--layout-features-='mark','mkmk' のように CSS の font-feature-settings で使うものを指定できます。 特に除外する理由もないので * を指定しています。
容量は小さくなるかもしれませんが試していません。
CSSファイルを作る
必要なウェイトを変換したら CSSファイルを作ります。
@font-face {
font-family: 'NotoSerifCJKjp';
font-style: normal;
font-weight: 400;
src:
url('./NotoSerifCJKjp-Regular-sub.woff2') format('woff2'),
url('./NotoSerifCJKjp-Regular-sub.woff') format('woff');
}
@font-face {
font-family: 'NotoSerifCJKjp';
font-style: normal;
font-weight: 600;
src:
url('./NotoSerifCJKjp-SemiBold-sub.woff2') format('woff2'),
url('./NotoSerifCJKjp-SemiBold-sub.woff') format('woff');
}
使う時はこんな感じに。
font-family: NotoSerifCJKjp, serif;
font-weit: 600;