Noto Serif CJK（源ノ明朝）の font-feature-settings:palt 対応サブセットフォントを作る

# はじめに

2017年4月に Google と Adobe による共同開発フォント「Noto Sans CJK（源ノ明朝）」が[発表](https://developers-jp.googleblog.com/2017/04/noto-serif-cjk-is-here.html)されました。

さっそくサイトでも使いたいところですが、そのままでは1ウェイトあたり約23MBもあるのでユーザーにかなりの負担を強いてしまいます。そこでサブセットを作ることにしました。

ここで言う「サブセット」とは必要な文字だけを抜き出したフォントファイルのことです。

## サブセットフォントメーカーは使わない

以前は武蔵システムさんの[「サブセットフォントメーカー」](http://opentype.jp/subsetfontmk.htm)という大変素晴らしいツールを使っていましたが、OpenTypeFontの情報をごっそり削ってしまいます。そのため CSS の `font-feature-settings:palt;` を用いた字詰めが出来ないのです。

![notoserif.png](https://qiita-image-store.s3.amazonaws.com/0/2513/f632eccd-3bc9-2a5a-39c6-96bfbcb8976c.png)

上の図は `font-feature-settings:palt;` を指定した状態です。サブセットフォントメーカーで作った Noto Serifは等幅として扱われているのがわかります。

## pyftsubset を使えば大丈夫

Python の fontTools に含まれる pyftsubset を使えば解決できるようです。

基本的には下記の記事が詳しいです。というかこの記事は下記の記事のコピペ＋メモみたいなものですｗ
[≫日本語フォントのOpenType機能を維持するサブセット化](http://qiita.com/yuhr/items/dbe9d39c9d0de34629b8)

## 出力は WOFF/WOFF2形式のみ

以前はIE対策として EOT形式を使っていましたが、IE9からは WOFF に対応したので WOFF/WOFF2 のみ出力します。Android4系に対応するなら TrueType形式が必要ですが……もういいですよね？


**この記事は OS X を対象としています。**

# 準備編

「すでに pip 使えるぜー」という人は「実践編」に進んで下さい。

## Python インストール

OS X には標準で Python がインストールされていますが、EL Capitan以降は後述するツールをインストールする時に権限のエラーが発生します。ですので Homebrew を使ってユーザー領域に別の Python をインストールします。

Homebrew をアップデートした後に Python をインストールします。アップデートはちょっと時間がかかります。

```bash
$ brew update
$ brew install python
```

### Python インストールの確認

まずは初期状態の Python の場所です。

```bash
$ which python
/usr/bin/python
```

Homebrew を使ってインストールすると下記の場所になります。

```bash
$ which python
/usr/local/bin/python
```

## pip のアップデート

Homebrew でインストールした Python には標準で pip が入っているので、アップデートだけでOKです。

```bash
$ pip install --upgrade pip
```
参考：[macOS SierraでPythonのパッケージマネージャ「pip」でインストールできない時の対処法](http://ottan.xyz/macos-sip-python-pip-5264/)



# 実践編

## fontTools のインストール

fontTools は Python を使ってフォントをいろいろやっちゃおうぜーというツールらしいです（よく知らない）。
pip を使ってインストールします。

[https://github.com/fonttools/fonttools](https://github.com/fonttools/fonttools)

```bash
$ pip install fonttools
Successfully installed fonttools-3.9.2
```

## Brotli のインストール

WOFF2形式を出力するために必要なのでインストールします。圧縮関係なライブラリ？

https://github.com/google/brotli

```bash
$ git clone https://github.com/google/brotli
$ cd brotli
$ python setup.py install
```

## Noto Serif CJK JP をダウンロード

[ダウンロードページ](https://www.google.com/get/noto/)に行きます。検索ボックスに `Noto Serif CJK JP` と入力して絞り込みます。あとはダウンロード！

## サブセットフォント作成！

fontTools に含まれている pyftsubset というツールを使ってサブセット化＞WOFF変換をまとめて行います。

```bash
$ pyftsubset NotoSerifCJKjp-Regular.otf --text-file=subset.txt --layout-features='*' --flavor=woff --output-file=NotoSerifCJKjp-Regular-sub.woff
```

`--flavor=woff2` にして、出力ファイル名も「.woff2」にして WOFF2形式を出力します。

```bash
$ pyftsubset NotoSerifCJKjp-Regular.otf --text-file=subset.txt --layout-features='*' --flavor=woff2 --output-file=NotoSerifCJKjp-Regular-sub.woff2
```

ファイルサイズを比較してみました。オリジナルが約23MB。サブセットが約2MBです（それでも大きいと言われそうですが）。

```bash
-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
```

![notoserif_.png](https://qiita-image-store.s3.amazonaws.com/0/2513/9b6660b2-5bea-6b39-a321-3de08e0182b7.png)

今度は字詰めが有効になりました！
最初の例と太さが違うのは、最初 SemiBold で試して、次に Regular を試したためです。

# 解説編

## サブセットに含める文字は第一水準＋α

`--text-file=subset.txt` でサブセットに含める文字をテキストファイルで指定します。自分の場合は第一水準＋下記の文字を入れています。

```
櫻燿璐廣會慄蘆跋扈殲憑吼祀侑澤翔栫閻
```

以前作ったサイトで必要だったの文字です。**なんとなく作品内容が見えてきますね。**

参考：[Noto Sans CJK JP フォントをダウンロードしてサイトに適用する手順](http://qiita.com/nowri/items/1c69b9b25f2958bd9f97)

## font-feature-settings を個別に指定できる

`--layout-features-='mark','mkmk'` のように CSS の `font-feature-settings` で使うものを指定できます。 特に除外する理由もないので `*` を指定しています。

容量は小さくなるかもしれませんが試していません。

# CSSファイルを作る

必要なウェイトを変換したら CSSファイルを作ります。

```css:NotoSerifCJKjp.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');
}
```

使う時はこんな感じに。

```css
font-family: NotoSerifCJKjp, serif;
font-weit: 600;
```