きっかけ

Android 端末では、font-familyで明朝体の指定をしたフォントが、ゴシック体で表示されてしまった。
端末間で同じ表示をさせるためには、webフォントを使用するしかない。
しかし、日本語のwebフォントをそのまま使おうとすると非常に重くなり、離脱率の原因にもなるため軽量化して使う必要がある。

取り組んだこと

1. webフォントをサブセット化について調査

サブセットフォントメーカー→OTF情報が削除されてしまう
日本語フォントをサブセット化したデータを配布などもあったが、こちらもサブセットフォントメーカーでサブセット化されたものなので、同様にOTF情報を持っていなかった

和風サイトの案件などで明朝体を使っているため、日本語webフォントの重さを解決しつつ、OTF情報を残したい

2. fonttoolsを使用しPythonにてフォントをサブセット化する

woff2の方が軽量だが、IEとAndroidで非対応のためwoffを選択
サブセット化する対象文字の選定

第一水準+記号+ひらがな+カタカナ+数字+常用漢字+人名漢字(3543字)とした

（使用用途によって適宜サブセット化する対象文字を変更することで対応）

日本語サブセット化の方法について

使用するもの

fonttools
軽量化したい OpenTypeフォント（Noto Serif CJK JPなど）
フォントに格納する文字のテキストファイル(第一水準+記号+ひらがな+カタカナ+数字+常用漢字+人名漢字)

事前準備

Python
pip（Pythonのパッケージ管理）
virtualenv（仮想環境作成）

pipのインストール

pipがない場合はhttps://bootstrap.pypa.io/get-pip.pyを保存して下記を実行

$ python get-pip.py

$ pip -v

バージョンが表示されたら成功

virtualenvのインストール

virtualenvをpipを使ってインストールする

$ pip install virtualenv

fonttoolsのインストール方法

fonttoolsのREADMEに記載あり
※Python の virtualenv というパッケージを使って仮想環境を作り、その中で FontTools を動かす。

1.ソースコードをダウンロード

$ git clone https://github.com/fonttools/fonttools.git

2.fonttools ディレクトリに移動

$ cd fonttools

3.仮想環境を作る

$ python -m virtualenv fonttools-venv

4.仮想環境を有効化

$ . fonttools-venv/bin/activate

5.インストール

(fonttools-venv) $ pip install -e .

6.brotli もインストール

(fonttools-venv) $ pip install brotli

fonttoolsの使用方法

1.fonttools ディレクトリに移動

$ cd fonttools

2.仮想環境を有効化

$ . fonttools-venv/bin/activate

3.フォントファイルとテキストファイルの場所を指定してpyftsubset
以下は例

(fonttools-venv) $ pyftsubset ./_src/NotoSerifJP-Regular.otf --text-file=./_src/chars.txt --layout-features='*' --flavor=woff --output-file=./_dist/NotoSerifJP-Regular.min.woff

上記のディレクトリ構造例
/fonttools/
　　/_src/
　　　　chars.txt（サブセット化する文字一覧のテキストファイル）
　　　　NotoSerifJP-Regular.otf
　　　　...他、各ウェイトのフォントファイル
　　/_dist/（ここにフォントが生成される）

キャッシュについて

フォントファイルは頻繁に更新しないため、キャッシュを利用してユーザーの通信を減らしたい。
読み込み部分にファイルの更新日を記入することで、無駄な通信を減らせる。

@font-face {
        font-family: "Mincho";
        font-style: normal;
        font-weight: 400;
        src: url('fonts/Mincho-Regular.min.woff?20190612') format('woff');
        font-display: swap;
}

その他の方法

.htaccessでキャッシュの制御を行えるが、案件によって.htaccessがいじれない場合がある。
使用方法を社内で統一したいため、今回は見送り。

ライセンスについて

サブセットフォントをつくる場合はくれぐれもライセンスに注意してください。
サーバーにアップロードして、webフォントとして使用する場合は**「再配布」にあたります。
また、サブセット化する場合は「改変」**にあたります。
**「再配布」と「改変」**が許されているフォントを使用してください。

今回使用しているNotoはSIL Open Font License 1.1なので

元のフォント名は使用しない
元のフォントのダウンロード先を明記する

を守るため、下記をcssに追加しました。

/*
* "NotoSerifJP" licensed under the SIL Open Font License
* https://www.google.com/get/noto/#serif-jpan
*/

引用・参考

OpenTypeフォントの軽量化と自動カーニング（https://ureta.net/2017/02/tool_fonttools/）
FontToolsの使い方（
https://qiita.com/daisuke_matsumoto/items/88c1391175a1888a7b08）