Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

fontmin (1).png

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

例えばIPAゴシックだと6.2MBほどのファイルサイズがあるので、さすがにそのままWebフォントとして使うのには抵抗がありますよね。

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

fontmin

https://github.com/ecomfe/fontmin

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

出来ること

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

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

使い方

インストール

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

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

コマンドラインで使う

サンプルとしてIPAゴシックを使ってみる。
ファイルサイズは6,235,344バイトある。

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

# フォント(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の中身はこんな感じです。

@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

次にサブセット化してないオリジナルIPAゴシックを指定。
当然ながらすべての文字がIPAゴシックで表示されてます。
ipa-full (1).png

最後にサブセット化したIPAゴシックを指定。
「フォントにフォント?」だけIPAゴシックで表示されています。
それ以外の文字はサブセット化したフォントに無いのでヒラギノ明朝で表示されています。
ちゃんと指定した文字でサブセット化されていますね。
ipa (1).png

ビルドプロセスで使う

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

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

gulp-fontmin

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

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

Tips

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

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

$ 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をインストール

$ brew install fontforge

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

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

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

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

fontforge otf2ttf.pe hogehoge.otf

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

FontForge Scripting Tutorialを参考にしました。

ちなみに、fontminのpluginでotf2ttfというのがあるんですが、まだ準備中とのことなので将来的にはfontminでttfへのコンバート処理が組み込まれるんじゃないかと思っています。

感想

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

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

fontmin (1).png

dayoshix
元Java屋。 最近Webフロントエンド中心で仕事しているアラフォーなおっさんです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした