日本語フリーフォントをWebフォント化するのってこんなに簡単なんだ!?

昔からお世話になっているウェブ情報サイト、Webクリエイターボックスがプチリニューアルしたという記事が昨日うpされておりましたが、その中にWebフォントの作り方が簡単に紹介されてまして "こんなに簡単なのか!?" と思い試してみたら超簡単だったのでご紹介します。

日本語フリーフォントをWebフォント化する方法

Webフォント化するフォントとそのライセンスの確認

丁度いま日本語フリーフォント「はんなり明朝」を使ったサイトのカンプOKが出たのでいざコーディング!という状況でしたので、ためしにはんなり明朝をWebフォント化してみました。

はんなり明朝のライセンスはフォントデータの改変以外は個人・商業用途での利用についての制限は無いようなのでWebフォント化して利用しても特に問題無いはず。

はんなり明朝

フォントをWebフォント化する無料ソフト

フォントをWebフォントかするにはソフトが必要。ソフトは無料で配布されている「WOFFコンバータ」というのを使いました。WindowsとMac用が有りましたので僕はMac用を。このソフトはTrueTypeフォント(.ttf)とOpenTypeフォント(.otf)が変換出来ます。はんなり明朝は.otfで配布されているのでもちろん対象。

フォントをWebフォント化する無料ソフト「WOFFコンバータ」

使い方はウルトラ簡単。下記リンク先からソフトをダウン&インストール&起動して変換前ファイルを参照して変換開始ボタンを押すだけ。変換したらWebフォント用に.woffというファイルが書き出されます。

オプションで著作権情報などを記述したメタデータを追加したり、IE用のEOTファイルを書き出せたり(IE9からWOFFに対応してるので、IE8以下用。まぁ、いらないよね笑)するみたいですのでここはお好みで。

武蔵システム:WOFFコンバータ

僕が作るサイトではお知らせやブログの見出しをWebフォント化したいので、はんなり明朝の.otfファイルをまるまる変換しました。元サイズが2.9MBで、変換後は2.2MB。正直ちょっと重い気はしますが、見出しをテキスト化出来るのはSEO的にかなり大きいのでここは目をつぶります。

Webフォント、WOFFとは

WOFFというのはWeb Open Font FormatというWebフォントの1形式の事みたいです。EOTというマイクロソフトのIEのみ対応している形式もありますが、IEには付き合ってられないのでこれは無視です。WOFFもIE9から対応しているのでWOFFのみでOKでしょう。

Webフォント、WOFFを読み込む方法

さて、フォントの変換が終わったら(Hannari.woffというのが出来ました)サーバ側に適当なフォルダを作りアップロード。アップロードしたらcssで読み込めばOK

こんな具合に@font-faceでfont-family名とフォントファイルを指定してやれば、以後のfont-family指定で使えます。

こんなに簡単に出来るんなら今後はWebフォント多用しそうですね!
↓Webフォント作れるようになったし、これ1冊持ってたら便利そう。