WOFF (Web Open Font Format)の導入

日本語訳の作成日: 2011-03-26
日本語訳の更新日: 2011-10-27

はじめに

Opera社のホーコン・ウィウム・リーは自由にダウンロードできるフォントのアイデアを最初に公表しました。そのアイデアは伝統的な「ウェブセーフなフォントセット」を超えた、デザイナーの好みのフォントを選択する自由をデザイナーに与えるというものです。これがWeb Fontの基礎を形作りました。

私たちはOpera 10でWeb Fontを初めて実装しました。Web FontはCSSでの特別な@font-faceルールによって、フォントファイル（OperaはTureType、OpenType、SVGフォントを初期にサポートしました）の連携を許可し、その結果、リンクされたフォントはウェブページにアクセスしたときに、「オンザフライで」ユーザーのコンピュータにダウンロードされます。

Opera 11.10では（Opera desktop team blogから最新のスナップショットを素早く入手できます）、Web Open Font Format (WOFF)と呼ばれる新しいフォントパッケージのサポートが含まれます。Opera、Microsoft、Mozillaによって合同で提案されたこのフォーマットは、TrueTypeとOpenTypeフォントのためのコンテナの役割を果たし、ファイルサイズを減らし、フォントとともにフォントの著作権などの拡張情報を含むことを可能にします。この文章は提供する簡潔なWOFFの導入、なぜWOFFが作られたのか、どのようなフォント制作者がWOFFをサポートするのか、どこでWOFFフォントフォームを入手できるのかを見て、最後にいくつかの例を紹介します。

なぜWOFFか？

私たちはWeb Fontがアクセシビリティやサーチエンジン最適化、データ相互運用性に妥協することなく、よりよいデザインなどの多くの利益をもたらすことをすでに知っています。WOFFは加えて、以下のような恩恵をもたらします。

圧縮されたコンテナフォーマットであり、縮小したファイルサイズを提供します。例えば、Orbitron書体はWOFFフォーマットでは16KBであり、EOTとTTFでは48KB、OTFでは20KBとなります。
元の情報はコンテナの中のメタデータファイルに含まれます。メタデータの中のvendor要素を見ることで、フォントがどこから来たのか確認ができます。
ライセンス契約はメタデータのlicense要素で記述されます。従って、ベンダーはWeb Fontの利用がフォントライセンスを忠実に守っているかどうかをより簡単に知ることができます。
おなじみの構文。WOFFフォントを利用するのに@font-faceと同じ文法を使用できます。

WOFFメタデータファイルの中にどのようなデータが含むことが可能なのか、そのようなファイルの例についてのより多くの情報は、WOFF File Format 1.0 specificationを参照のこと。メタデータの例がAppendix Aにあります。

フォント制作者とIEを含むブラウザはこのフォーマットの後押しを徐々に積み重ねることで、支持は大きくなっていくでしょう。

どこでWOFFフォントは入手可能か？

いくつかのよいオープンソースなフォントサイトがあります。原著者が好きなサイトはFont squirrel、League of movable type、Unicode Fontです。不幸なことに、これらのサイトからのフォントの大部分は未だにWOFFパッケージではありません。こんなときはどうすればよいのでしょうか。

多くのオープンライセンスフォントは簡単にWOFFフォントに変換することができます。例えば、フォント向けとして人気のあるSIL Open Font License (OFL)は、このライセンスの下で修正や再パッケージできると明言しています。あなたが必要とするものはコンバートするためのOTFもしくはTTFファイルだけです。あなたはこれをFont Squirrel's @font-face generatorにつぎ込むと、モダンブラウザの全域をサポートするための山ほどの異なるフォントフォーマット、もしくは正しいWOFFフォーマット（"expert"オプションを選択して）を生み出すことができます。

訳註：日本語フォントについては、WebFonts として利用できるフリーの和文フォントにまとめがあります。

もう一つの有用なツールはMozillaの親切な人たちが作成したsfnt2woffフォント作成コマンドツールです。MacとWindowsバーションが使用可能です。

訳註：日本語の有用なソフトとして、WOFFコンバータがあります。

実例


@font-face {
  font-family: 'raleway';
  src: url('raleway_thin-webfont.woff') format('woff');
  font-style: normal;
}

em {
  font-family: raleway, serif;
  color: #F45355;
 
}


  @font-face {
  
    font-family: 'procionott';
    src: url('procionott-webfont.woff') format('woff');
    font-style: normal;
}

#subtext #image1{
    font-family: procionott, serif;
}

まとめ

OperaがWOFFをサポートするのをうれしく思います。フォント制作者がWeb Fontを配布すること、デザイナーがWeb Fontを使用すること、ユーザーがWeb Fontを享受することが、WOFFによってようやくより簡単にし続けることができるのです。

仕様書とリファレンス

CSS Fonts Module Level 3 (2018-09-20 REC) 4 Font resources: https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#font-resources

WOFF (Web Open Font Format)の導入

はじめに

なぜWOFFか？

どこでWOFFフォントは入手可能か？

実例

まとめ

仕様書とリファレンス

著作権表示