Web FontはTrueType Fontを用意すれば終わりではなく、ブラウザに応じて対応するフォントの種類が異なるので複数用意しなければなりません。TrueType、Embedded OpenType、Web Open Font Format、SVGの4種類が基本です。 せっかくフォントを作ったのに、さらにそんな各フォーマットの用意が面倒という声はあるでしょう。そこで使いたいのがWebifyです。

Webifyの使い方

WebifyはWindows/Mac OSX/Linux向けにバイナリが配布されていますのでダウンロード後、適当なパスの通っているところに配置するだけです。

後はTrueTypeフォントを指定してコマンドを実行します。

$ webify sourcesanspro-boldit-webfont.ttf 
Generating sourcesanspro-boldit-webfont.eot
Generating sourcesanspro-boldit-webfont.woff
Generating sourcesanspro-boldit-webfont.svg
Available cmaps
-----------------------------------------------------------------------------
PlatformId | EncodingId | Description                                        
0          | 3          | Unicode 2.0 and onwards semantics, Unicode BMP only
1          | 0          | Macintosh Roman 8-bit simple                       
3          | 1          | Microsoft Unicode BMP (UCS-2)                      
-----------------------------------------------------------------------------
Selecting platformId 3 encodingId 1 -- Microsoft Unicode BMP (UCS-2)

このように一つのフォントから他のフォント、SVGを生成してくれます。WOFFはバージョン1.0の対応で、2.0には未対応とのことです。後は、

@font-face {
    font-family: 'my-font-family';
    src: url('my-font-filename.eot');
    src: url('my-font-filename.eot?#iefix') format('embedded-opentype'),
    url('my-font-filename.svg#my-font-family') format('svg'),
    url('my-font-filename.woff') format('woff'),
    url('my-font-filename.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

こんな感じで指定すればOKです。Webifyを使うとWeb Fontの制作と利用が手軽になりそうです。

WebifyはHaskell製のオープンソース・ソフトウェア(MIT License)です。

ananthakumaran/webify