【関連】Webフォントについての記事（タグ：webフォント）

TTFとEOTに続き、WOFFファイルを生成し設定

昨日はTTFとEOTに対応させましたが、今日は、より新しいWebフォント形式であるWOFFにも対応させます。
下記URLを参考にしました。
http://www.adobe.com/jp/devnet/dreamweaver/articles/html5pack_css3_part4.html

＜引用＞Internet Explorer 8以下に的確にEOTフォントを読み込ませるためには、font-familyプロパティの先頭にEOTフォントへの参照を追加します。この時、拡張子「.eot」の末尾に「?」をつけ、さらにformat()の値に本来指定すべきでない値（なんでもよい）を指定します。今回は「format(‘oldIE’)」としました。末尾の「?」と「format(‘oldIE’)」は、Internet Explorer 8以下でEOTフォントのみを利用させるためのトリックです。

CSSファイルでWOFFを読み込む用に設定する

このサイトでのCSSファイルの設定（現状）

@charset "UTF-8";

@font-face
{
font-family: font-r;

src: url('webfonts/mplus-1p-regular.eot?') format('oldIE'),
url('webfonts/mplus-1p-regular.woff') format("woff"),
url('webfonts/mplus-1p-regular.ttf') format("truetype");
}

@font-face
{
font-family: font-b;

src: url('webfonts/mplus-1p-medium.eot?') format('oldIE'),
url('webfonts/mplus-1p-medium.woff') format("woff"),
url('webfonts/mplus-1p-medium.ttf') format("truetype");
}

WOFFを用意する

WOFFコンバータ

IE9以降、firefoxで使えるWOFF（Webフォント）を用意するためのアプリ。
Win・Mac両対応なので試してみました。
このアプリでローカル（PC上の）のTTFファイルを指定して変換すすれば拡張子woffのファイルが生成されます。それを指定の場所にアップロード。

概要

フォントとWOFFの相互変換を行うソフトです。
WOFFはWeb Open Font Formatの略で、Webフォントの1形式です。
変換元のフォントとしては、TrueTypeフォント（拡張子 .ttf）、OpenTypeフォント（拡張子.otf）、Windowsにおけるフォントにリンクする形式の外字ファイル（拡張子.tte、.ote）を指定できます。
WOFFの作成と同時にEOT（Embedded OpenType）ファイルを作成することもできます。ただし、Windos版で作成したEOTファイルは圧縮されていますが、Mac版では圧縮されていません。
WOFFをTrueTypeフォント／OpenTypeフォントに変換することもできます。
本製品はフリーソフトです。
本ソフトはサポート対象外ですので、予めご了承ください。

動作環境

Windows版
Windows 2000／XP／Vista／7 で動作します。

Mac版
Mac OS X 10.4 以降で動作します。（PowerPC と Intel プロセッサの両方に対応した Universal Binaryです。）
ブラウザ

WOFFが使えるブラウザについては対応Webブラウザをご覧ください。