日本語webフォントサブセット化について

#きっかけ
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）