Firefox 3.6から使える様になったWOFFフォントを使ってみた
ついにFirefox 3.6がリリースされました。3.6からは埋め込みフォントとして今までのTTFとOTFに加え、WOFFフォントが使用可能になりましたので早速試してみました。
※その他の3.6からの新機能は下記参照。
Firefox 3.6 for developers - MDC
https://developer.mozilla.org/ja/Firefox_3.6_for_developers
WOFFフォントについてですが現時点では基本的にTTF形式のフォントファイルから変換をして使用することになると思います。
今回は以下のサイトのフォント変換サービスを利用させて貰いました。
Font Squirrel | Create Your Own @font-face Kits
http://www.fontsquirrel.com/fontface/generator
こちらフォントをアップして、WOFFフォントにチェックをして実行するだけでWOFFフォントとサンプルのHTMLやCSSファイルが圧縮されてZipなっているものがDLされます。
変換元のTTF形式のフォントについてはこちらの M+ さんのものを利用しました。
M+ OUTLINE FONTS | DOWNLOAD
http://mplus-fonts.sourceforge.jp/mplus-outline-fonts/download/index.html
こちらで配布されているフォントは以下の様なライセンスとなっており、この様な用途に無料で利用可能な数少ないフォントです。
作者の方に感謝しつつ、バンバン活用しましょう。
これらのフォントはフリー（自由な）ソフトウエアです。
あらゆる改変の有無に関わらず、また商業的な利用であっても、自由にご利用、
複製、再配布することができますが、全て無保証とさせていただきます。
CSSの記述
今回作成したサンプルのCSSファイルの記述は stylesheet.css に記載されているのものを活用し、以下のように記述しました。
@font-face { font-family: 'M+1clight'; src: url('mplus-1c-light.eot'); src: local('M+ 1c light'), local('mplus-1c-light'), url('mplus-1c-light.woff') format('woff'), url('mplus-1c-light.ttf') format('truetype'), url('mplus-1c-light.svg#mplus-1c-light') format('svg'); } .example { font-family: 'M+1clight'; font-size: 36pt; }
HTMLの主な部分はこの様な記述になります。
HTML
<span class="example">こんにちは世界!!Hello, World!</span><br />
実際のサンプルはこちらから確認できます。
関連サイト
・WOFFについての解説記事。あまりに詳細なのでこのエントリーで書く事が無くなってしまいました。WOFFについて詳しく知りたい人におすすめの記事です。
次期Firefox 3.6が対応する新しいwebfont形式“WOFF”とは？ - フォントブログ
http://blog.petitboys.com/archives/woff.html
・どのブラウザがどのフォント形式の埋込みに対応しているかの一覧情報
@font-face - MDC
https://developer.mozilla.org/en/CSS/@font-face#Browser_compatibility
Web Open Font Format for Firefox 3.6 ✩ Mozilla Hacks – the Web developer blog
http://hacks.mozilla.org/2009/10/woff/
WOFF File Format
http://people.mozilla.com/~jkew/woff/woff-spec-latest.html
