サイトアイコン Lonely Mobiler

TrueTypeFont を WebOpenFontFormat へ変換する

最近ちょっと Web フォント触り始めたのでメモ代わりに。

フォントの種類

Webフォントとして利用できるものには以下のようなものがあります。

TrueType Windows とかでも使ってる良く見るアレ
OpenType PostScriptとTrueTypeを統合したフォント形式
WebOpenFontFormat(WOFF) Web用の新しい形式。軽い。
EmbeddedOpenType(EOT) 主にIEで使用される。Webフォントの先駆け

今どきのブラウザであれば大抵対応しているので、できる限り容量の軽い WOFF を使ったほうがよさそう。特に日本語フォントは文字数の影響でファイルサイズが大きくなりがち。

例えば手元にあった MigMix1m.ttf, このままでは 3.1MB もあるが WOFF にすると 2MB ほどになる。いろいろ試してみたが大体 2/3 ぐらいのファイルサイズになるようだ。実際に利用する場合はここから更に使用していない漢字などを削除したほうが良いと思う。

変換ツールもいくつか出ています。

WOFF への変換方法

Webサービス

以下のサイトにアップロードすると Woff 形式のフォントに変換してくれる、らしいけど試してない。
WEBFONT GENERATOR

なんでかというと日本語のフォントいれたら容量オーバーで変換できなかったから。しょうがないね。

Windows/MacOS

Windows もしくは MacOS であれば以下の WOFFコンバーター を使用する事で手軽に変換できます。

WOFFコンバーター

シンプルで良いと思う。

Linux

Linux の場合は sfnt2woff を使おう。コンソールから使えます。

WOFF fonts!

インストール

$ wget http://people.mozilla.com/~jkew/woff/woff-code-latest.zip $ unzip woff-code-latest $ cd woff-code-latest $ make


make すると同じディレクトリ内に sfnt2woff が生成されているはず。

使い方

フォントのファイル名を引数にして実行するだけ。

$ ./sfnt2woff TargetFontFile

これで WOFF が生成されます。

Webfont の使い方

適当にサーバにアップロードして以下のように @font-face でフォントを定義すれば font-family で扱えるようになります。 font は基本的には同一ドメイン上にある必要があるようです。

@font-face { font-family:migmix1p; src: url(./font/MigMix1p.woff); } .migmix1p { font-family: migmix1p; }

Sponsored Link
モバイルバージョンを終了