フロントエンド開発Blog

オレには鈍器がある

このエントリーをはてなブックマークに追加

Adobe , Google , font , otf , ttf , フォント

とある事情で源ノ角ゴシックをWEBフォントとして使えないかと考える必要に迫られました。

そのままWEBフォントとして読み込ませるとどうしても重たい。フォントファイルだけで4MBほどありますから、光回線で閲覧しても初回のロード時間がかかりすぎてしまいます。

そのまま使うと重すぎるため、何とか日本語文字とアルファベットだけ抜き出せないか(サブセット化)と試行錯誤しました。

そもそも源ノ角ゴシック(Source Han Sans)って?

何かを攻略するときは攻略対象を知る必要がありますよね。ということで諸々調べてみました。

要するに、AdobeさんとGoogleさんがタッグ組んで作ったApache License 2.0の0円フォントってことですねわかります。Apache License 2.0ってことはライセンス表記が必要ですね。

WEB領域に載っけるのであれば再頒布条件も守らねば。派生成果物も原則このライセンスを適用する感じですね。

他にも諸々調べていくとGoogleさんからはNoto Sansという名前でリリースしている模様。

気になる中身はどうやら同一のようですね。。

サブセット化の方法を探る - その1:サブセットフォントメーカーに頼る

武蔵システムさんのサブセットフォントメーカーを使ってみました。結論から言うとこれでは駄目でした。

「フォントに格納する文字」の部分に以下のファイルの内容を入力してサブセット化しましたが、どうあがいてもフォントがつぶれたりにじんだり細くなったりしました。源ノ角ゴシックの一番細いフォントだと顕著に崩れました。

日本語例

他のサイトでも同様の声が上がっていたため、どうやら今回のケースでは武蔵システムさんのサブセットフォントメーカーは利用できないようです。残念!

つめもようさんのサイトの下の方を見ると、どうやらFontForgeというソフトを使って不要な文字グリフを選択的に消去して軽量化できるようです。これでやってみます。

サブセット化の方法を探る - その2:FontForgeを使ってみる

このFontForge、MacやLinuxなら本家からDLしてすぐに使えるみたいですね。

windowsだと正しく動作しないようです。というわけでまたまた調べてみたところ、Windowsでも「そこそこ」安定して動くアンオフィシャルなソフトがあるようで、そちらを使うことにしました。

cygwin環境下で動作させるもののようです。この場合、Pathにスペースや二バイト文字が入らないディレクトリに置かないと上手く動作しないようです。というわけで取り急ぎC:fontforgeに置いて、付属のbatを叩きました。

初回起動時は5分くらい待ちます。次回からはすぐに立ち上がるようです。fontforgeが起動したら源ノ角ゴシックExtraLightを開きます。

すると・・あれ?なんか300個くらいエラーが表示された。表にも文字がありません。正しく読み込めない・・・ようです。Noto Sansも同様の現象。

某掲示板で調べると同じ症状でサブセット化を諦めている方々がいらっしゃる様子。うーんここまで来て諦めるしかないのだろうか・・・

サブセット化の方法を探る - その3:派生フォントを使う

このあと、武蔵システムさんのOTEditを使って「新規otf作成=>Fontグリフ一括コピー」してからFontForgeに読み込ませてみたり(結局文字がにじんで使えず・・)、GZ圧縮転送(意味ないだろうけど念のため試した)したり迷走すること1日費やしました。結局改善策を見いだせず。

もう藁をもすがる気持ちです。派生フォントを作った=FontForgeで出たErrorとかも解消されてるはず、という何とも他力本願な感じで。。

自家製フォント工房さんの源真ゴシック。源ノ角ゴシックベースにM+OUTLINE FONTSを組み合わせたTrueTypeフォント。otfじゃなくttfですね。こちらを使わせていただくことにしました。

FontForgeに読み込ませてみるとあらあらあら!正常にフォントグリフが表示されました!よかった!あとはここから不要なグリフを削除するだけです。手作業でもいいかなーとか考えてましたが自分の命が惜しいので自動化することにしました。

こちらのブログで詳細な方法が掲載されています。使用したいテキストはすでにchar.txtとして作ってあったので私は「node listCharFF.js char.txt > charFF.txt」からやりました。

あとはcharFF.txtをFontForgeで実行するだけです。FontForgeにコピペ出来ない場合は、「読み込み」ボタンを押すとファイル選択ダイアログが起動しますのでcharFF.txtを選択。そのまま実行でいけました。どうもコピペできる行数が決まっているらしく、私のcharFF.txtの中身が全てペースト出来ませんでした。

やっとできました。サブセット化。あとはファイル>フォント出力でtruetypeで書き出し。保存前のバリデーションはオフにしました。なんだか時間かかりすぎてしまうので。。

できあがったフォントをCSSに割り当ててみると・・・あれ?なんかおかしい。

IEだとbr改行タグ部分に謎の□(豆腐みたいなやつ)が表示されてしまいます。うーんなんか聞いたことがあるぞこの現象。

FontForgeに戻って上からグリフを確認。00A0のno-break spaceまで削除されてました。ああああ・・自動化で楽した自分へのごほうb、じゃなくて罰ですかね。。

FontForgeで該当箇所を空白で埋めて再度フォント出力。今度は大丈夫でした。よかった。長かった。

丸二日かかったサブセット化

えらく時間かかってしまいましたが無事サブセット化できました。実際にWEBサイトを公開するときはライセンス条項を守りながら公開しないと。。もうしばらくフォントファイルは見たくありません。

ページトップへ

関連ページ

ページトップへ