ちょっと前から、このサイトのフォントが変わっていることにお気付きだろうか。

どうみても“明朝”や“ゴシック”ではないので、気付くわな。

一般的に、ウェブサイトのフォントはOSにインストールされているフォントに依存する。

ちょっと前までは、特定のフォントを使いたい場合、画像化するしか手段がなかった(よね?)。

ところがどっこい、このサイトで使用されている文字は、画面上部のバナー部分を除いてすべてテキストである。

どうしているのかって?

スタイルシートを使っているのです。

スタイルシート、万歳。

なんだかホントに、すごい勢いで進化していくよね、ウェブの世界って。

乗り遅れないよう、必死です。

で、乗り遅れないように、自分のサイトでウェブフォントを試してみました。

スタイルシートの記述に関してはとっても簡単。

@font-face {
  font-family: 'あんず文字';
  src: url(../font/APJapanesefont.woff) format('woff'); /* for IE(>=9), Firefox(>=3.6), Safari(>=5.1), Chrome(>=6), Opera(>=11) */
}

@font-face {
  font-family: 'あんず文字';
  src: url(../font/APJapanesefont.eot); /* for IE */
}

body {
  font-family: 'あんず文字','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
}

@font-faceで任意のフォント名を定義して、ウェブフォントのファイルのURLを指定。

あとは使いたいセレクタ(この場合はbody要素)に先ほど定義したフォント名を記述するだけ。

ね? 超簡単。

ただし。

フォントには絶対に避けて通れない、超重要事項がある。

それは、著作権問題。

英字フォントはフォント全体の文字数が少ないせいもあってか、フリーなフォントが世界中にゴマンとある。

しかし、日本語フォントは漢字で何千文字とあるので、フォントを作成するには並々ならぬ労力と時間が必要となる。

従って、そのほとんどのフォントは有償となる。

スタイルシートは簡単に記述できても、ウェブフォントを使用するのは簡単ではない。

そんな状況の中、数少ないフリーフォントをまとめて紹介してくださっているサイトがある。(といってもすべてが完全ドフリーなワケではないので注意)

WebFonts として利用できるフリーの和文フォント | ヨモツネット
http://www.yomotsu.net/wp/?p=565

WebFonts はとても便利で今まで似なかった表現ができる仕組みですがフォントファイル使用時のライセンスは難しく、本当に使えるのかがわかりづらいです。そこで一つずつライセンスを読み、WebFonts として利用できるフォントをまとめてみました。この記事内でもライセンス条文の抜粋を引用していますが、全文ではないのでフォントの利用時にご自身で再度ご確認ください。もし私の解釈に間違いがあったら指摘していただければ幸いです。

ライセンスが不明だったフォントについては作者さんに直接メールを送らせていただき、回答で OK をいただくことができた作品を紹介しています。紹介記事内のフォントのキャプチャは実際に Windows 7 の Chrome で表示した様子です。

ヨモツネットさん。

本当に、ありがとうございます。

さて、このヨモツネットさんでご紹介いただいているフォントを実際ウェブフォントとして使うために、必ず確認しなければならない重要事項がある。

ひとつは、WebFonts として利用可能かどうか (サーバーに UP してもよいかどうか)。

これは、WebFontsとしてフォントを利用するためにはフォントファイルをサーバーにアップロードする必要があるのだが、“サーバーにアップロードする”は“数多の人がダウンロード可能である”とほぼ同義になるからである。

もうひとつは、TTF から EOT や WOFF などに変換してもよいかどうか。

多くの場合、フォントは“True Type Font”(TTF)として配布されているが、残念ながらTTFのままウェブフォントとして使用できることはほとんどない。

“ほとんどない”とはつまり、TTFをそのまま表示できるブラウザが“ほとんどない”のである。

先ほどのCSSのコードにも書いたが、いわゆるモダンブラウザの多くで使えるのは“WOFF(Web Open Font Format)”という形式。

これはMozilla が中心となって他の組織と提携して開発したウェブフォント形式で、Webでの利用を前提に設計されているため、既存のフォントファイルに比べファイルサイズが圧縮されているのが特徴である。

そして、IE8以下で使えるのが“EOT(Embedded Open Type)”形式。

Microsoft社が独自に開発したフォーマットで、やはりファイルサイズが圧縮されている。

つくづく、Microsoftって独自路線が好きよねえ、、、

本気で世界征服を狙っているとしか、、、

まあ、IE9からはWOFFが使えるようになったんだけど、それなら最初から足並み揃えようよ。

ハナシを元に戻して、とにかくTTFのままではウェブフォントとして使えないから他のフォーマットに変換する必要があるのだが、フォント製作者がそれを良しとしているかどうかが重要になる、ってこと。

その辺もヨモツネットさんではばっちりまとめてくださっているので、本当に助かります。

で、調べてみると、以前からウェブ以外のところでよく利用させていただいていた“あんずもじ”がWebfontでの利用OK、形式変換OKとなっていたので、さっそく使わせていただくことにしました。

あんずいろapricot×color
http://www8.plala.or.jp/p_dolce/index.html

作者の京風子さん、いつもお世話になっております。

ありがとうございます。

TTF形式のフォントファイルをありがたくダウンロードさせてもらって、そこから形式変換をしないと使えない。

そこで、形式変換のアプリケーションをご紹介。

WOFFコンバータ ―武蔵システム
http://musashi.or.tv/woffconv.htm

武蔵システムさんは“フォント屋さん”なので、本来は“フォントを買ってもらう”のが商売のはずなのに、無償でこのような便利なアプリケーションをダウンロードさせていただき、ありがとうございます。

WOFFの作成と同時にEOT(Embedded OpenType)ファイルを作成することもできます。ただし、Windos版で作成したEOTファイルは圧縮されていますが、Mac版では圧縮されていません。

Windowsユーザーであればこのアプリケーションだけで間に合います。

これで、準備は終了。

あとはサーバーの適当なディレクトリにこれら(WOFFおよびEOT)のファイルをアップロードして、スタイルシートを上書きすれば、OSのフォントに依存することなく好みのフォントでサイト表現が可能になります。

(ただし、Android2.3.5では、ウェブフォントは表示されませんでした。)