WebFontsを試してみる。

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

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

  • FireFox 3.5 → TrueType(.ttf), OpenType(.otf)フォントが使用可能。
  • FireFos 3.6 → 加えてWOFFが使用可能。
  • Safari 3.1以降 → TrueType,OpenTypeが使用可能。
  • Google Chrome 2.0以降 → TrueType,OpenTypeが使用可能。
  • Opera 10.0以降 → TrueType,OpenTypeが使用可能。
  • Internet Exproler → EOT形式(.eot)が使用可能。

...ということで、いつものように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.otfとmikachan.eotをWebサーバにアップロード。あとはCSSとhtmlを書くだけです。

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


  • font-family ：フォントの名前。とりあえず任意の名前で大丈夫。
  • src : url( "〜" ) ：サーバ上の、フォントが置いてある場所のURL。今回は相対パスで記述してます。
  • src : local( "〜" ) ：もしユーザのPCにフォントがインストールされていれば、ダウンロードせずにそちらを使う。でも今回はフォントのファイル名を弄ってしまっているので殆ど意味なし。

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

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

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

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



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

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

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

　　



カテゴリ:

タグ: