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

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

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

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

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

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

はんなり明朝

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

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

使い方はウルトラ簡単。下記リンク先からソフトをダウン＆インストール＆起動して変換前ファイルを参照して変換開始ボタンを押すだけ。変換したら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: 'hannari';
  src: url('font/Hannari.woff') format('woff');
}
.hannari{
  font-family: 'hannari';
}

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

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

[amazonjs asin="4844364030" locale="JP" title="日本語デザインフォント デザインワークに使える和文セレクト書体集"]