はじめに

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;