WebFontsを試してみる。

PC版へ 2010年02月19日

さてさて、Webページに表示させたいフォントをスタイルシート(CSS)で指定することができるのですが、これまでは、そのフォントがユーザのPCにインストールされていなければ表示されませんでした。でも、次期の仕様CSS3では、サーバ側にフォントを準備しておいて、そのフォントを表示に使用できるようになります。WebFonts(ウェブフォント)と呼ばれています。

ブラウザの対応も徐々に進んでいるようで、

...ということで、いつものようにIEだけ独自仕様。Windows上でTTF→EOTへ変換するユーティリティ『WEFT』という奴がMicrosoftから配布されていたり、オンラインで変換できるサービスもあったりします。

  → Online font converter (http://onlinefontconverter.com/) これ、便利。

では実際にウェブフォントを試してみましょう。

の前に、フォントには当然のようにライセンスがあります。「うちのWebページは平成角ゴシックで読んでもらいたい!」からと言って、Webサーバに平成角ゴシックをアップロードしては駄目。ライセンス違反で怒られます。

ということで「無償、再配布可能、改変可能」なサイズが小さめのフリーフォントを探してみると、かの有名なみかちゃんフォントが見つかったので、とりあえずこれを使ってみます。

  → オリジナルフォント 『みかちゃん』

ここから「OpenTypeの等幅フォント」をダウンロード。アーカイブを解凍すると「みかちゃん.otf」というフォントファイルが現れます。とりあえずファイル名をアルファベット表記『mikachan.otf』に変更。今回はWebサーバ上にあるフォントをユーザ側に表示、という方針なので、このフォントをローカルPCにインストールする必要はありません。

いちおうIEユーザのために、Online font converterで.eotファイルを作成しておいて、mikachan.otfmikachan.eotをWebサーバにアップロード。あとはCSSとhtmlを書くだけです。

CSSの当該部分は以下のとおり。★この部分、修正版があります。→コチラの記事


名前をつけて、IE用の宣言をして、その他ブラウザ用の宣言をしています。hail2u.netさんの記事によると、上のような順番で記述するのが良いらしい。

であとは、フォント "mikachan" を使いたい領域で、たとえば

なんて記述してやればOK。

下のような感じになります。(別窓で開く)



ちなみに縦書きレイアウトについてはコチラを参照してください。

うん、表現の幅が広がりそうですね。
ただし日本語フォントの場合、ファイルサイズが大きいのでダウンロード→表示に時間がかかります。サイズの小さいフォントでも1MB以上ありますもんね。そしてオレのやり方がマズいのか、xp上のIE8では意図したフォントで表示ができません。.eotファイルがおかしいんだろうかなぁ。後のブラウザは大丈夫でした。

FireFoxでうまく表示されないぞ! という人は、環境設定(Windowsな人は「ツール」→「オプション」)から、コンテンツ→フォントの詳細設定ボタンをクリックして、「Webページが指定したフォントを優先する」にチェックが入っていることを確認してみてください。これを見落としていて3時間くらい悩んだの。

  



関連記事

コメント

KKK

src : url( "mikachan.eot") ;

src : url( "mikachan.eot?") ;

?をつけるのが正しい回避の仕方みたいです。