フォントファイルから使いたい文字を抜き出してコマンドラインでWebフォント化するfontminが便利だった

![fontmin (1).png](https://qiita-image-store.s3.amazonaws.com/0/31639/7b62b239-0b26-2468-4f07-fcb1de6fc880.png)

Webページで日本語のWebフォントを使いたいんだけどフォントファイルのサイズが大きくて諦めたなんて経験ないですか？

例えば[IPAゴシック](http://ipafont.ipa.go.jp/)だと6.2MBほどのファイルサイズがあるので、さすがにそのままWebフォントとして使うのには抵抗がありますよね。

じゃあ使いたい文字だけ引っこ抜いてフォントファイルを再構築すればいいじゃね？という考え方を元にした手法として**フォントのサブセット化**というものがあります。

# fontmin

https://github.com/ecomfe/fontmin

fontminはWebフォントフレンドリーなフォントのサブセット化をサポートするツールです。
nodeモジュールであり、CLIもサポートしているのでビルドプロセスに組込みやすいという点ではフロントエンダーには嬉しいところではないでしょうか。

# 出来ること

具体的に出来ることは下記になります。

* フォントファイルを指定した文字でサブセット化したフォントファイルに変換
  * 出力できる形式は`woff`、`ttf`、、`eot`、`svg`。Webフォントフレンドリー。
* レガシーブラウザも考慮したベストプラクティスっぽいcssの`@font-face`を吐いてくれる
* ソースはTrueTypeFont（`ttf`）のみっぽい
  * OpenTypeFont（`otf`）を使いたい場合は一旦TrueTypeFontに変換しなければならない。

# 使い方

## インストール

```bash

# グローバルで使う場合
$ npm install -g fontmin

# ヘルプを見る
$ fontmin --help

```

## コマンドラインで使う

サンプルとして[IPAゴシック](http://ipafont.ipa.go.jp/)を使ってみる。
ファイルサイズは`6,235,344`バイトある。

`フォントにフォント？`という文字だけに対応したIPAゴシックのサブセットを作る。

```bash

# フォント（ipga.ttf）をoptimizeディレクトリに出力
# -tオプションでサブセット化する文字列を指定
fontmin -t フォントにフォント？ ipag.ttf ./optimized

```

`optimized`ディレクトリには以下のファイルが出力される。

* ipag.css  (  416バイト)
* ipag.eot  (2,904バイト)
* ipag.svg  (2,480バイト)
* ipag.ttf  (2,732バイト)
* ipag.woff (2,804バイト)

めちゃくちゃサイズが減りましたね！！

`ipag.css`の中身はこんな感じです。

```css

@font-face {
     font-family: "ipag";
     src: url("ipag.eot"); /* IE9 */
     src: url("ipag.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
     url("ipag.woff") format("woff"), /* chrome、firefox */
     url("ipag.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
     url("ipag.svg#ipag") format("svg"); /* iOS 4.1- */
     font-style: normal;
     font-weight: normal;
}

```

`eot`はレガシーIEをターゲットにしていないのなら消してもいいですね。

実際の表示を確認してみます。

まずWebフォントを使わずfont-familyにヒラギノ明朝を指定。
![hiragino-mincho (1).png](https://qiita-image-store.s3.amazonaws.com/0/31639/1b5257b1-213c-688f-0662-f3db3883cace.png)

次にサブセット化してないオリジナルIPAゴシックを指定。
当然ながらすべての文字がIPAゴシックで表示されてます。
![ipa-full (1).png](https://qiita-image-store.s3.amazonaws.com/0/31639/fef0bfb1-81c8-3dcd-a562-b9fcc8daad9a.png)


最後にサブセット化したIPAゴシックを指定。
「フォントにフォント？」だけIPAゴシックで表示されています。
それ以外の文字はサブセット化したフォントに無いのでヒラギノ明朝で表示されています。
ちゃんと指定した文字でサブセット化されていますね。
![ipa (1).png](https://qiita-image-store.s3.amazonaws.com/0/31639/d07fec4a-1102-574f-b4e3-ea1b1101b54a.png)

## ビルドプロセスで使う

ビルドプロセスに組み込む場合はCLIがあるのでGulpやGruntからコマンドを直接叩けばいいかなと思います。

一応Gulpのプラグインもあります。

[gulp-fontmin](https://www.npmjs.com/package/gulp-fontmin)

# フォントのライセンスに注意

フォントのサブセット化はプログラムの改変にもなるので利用するフォントがサブセット化して配布しても良いのか確認しましょう。

# Tips

## Webページからサブセット化したい文字を抜き出す

本家のREADMEに紹介されていましたが`html-to-text`というnode製のコマンドラインツールで、HTMLの中のテキストを引っこ抜く方法が紹介されていました。

```bash

$ npm install -g html-to-text
$ text=`curl www.baidu.com | html-to-text` && fontmin -t $text font.ttf

```

AngularJSなどで作ったSPA(Single Page Application)だと`curl`の替わりに`phantom-fetch-cli`というnode製のコマンドラインツールを使うと良いとのこと。

但し、試してみたところ拾ってくる文字によってフォントファイルとの兼ね合いでなのかエラーで落ちる場合がありました。
ここらへんは突っ込んで調べてない。。

## OpenTypeFontをTrueTypeFontに変換する

fontminの入力ソースはTrueTypeFontのみのようなのでOpenTypeFontで配布されているものはTrueTypeFontに変換する必要があります。
fontminでは出来ないので、fontforgeなどのツールを使って変換すると良いでしょう。

まずfontforgeをインストール

```bash

$ brew install fontforge

```

fontforgeでTrueTypeFontに変換するためのスクリプトファイルを作成します。

ファイル名は`otf2ttf.pe`とします。

```bash

#!/usr/local/bin/fontforge
Open($1)
Generate($1:r + ".ttf")

```

fontforgeでスクリプトを実行します。

```bash

fontforge otf2ttf.pe hogehoge.otf

```

hogehoge.ttfファイルが出来ました！

[FontForge Scripting Tutorial](http://fontforge.github.io/en-US/tutorials/scripting/)を参考にしました。

ちなみに、fontminのpluginで[otf2ttf](https://github.com/junmer/fontmin-otf2ttf)というのがあるんですが、まだ準備中とのことなので将来的にはfontminでttfへのコンバート処理が組み込まれるんじゃないかと思っています。

# 感想

ちょっと触っただけですがビルドプロセスに組み込みやすいfontminを使って日本語Webフォントを積極的に使ってみたくなりました。

これからも生暖かく見守りたいと思います。

![fontmin (1).png](https://qiita-image-store.s3.amazonaws.com/0/31639/7b62b239-0b26-2468-4f07-fcb1de6fc880.png)