先週からちょこちょこ弄っていたブログのデザインが、やっと一段落しました。以前から大きくは変わっていませんが、IEでもChrome、Firefoxと同じように見えるようになったんじゃないかと思います（IE9だとタイトル部分がおかしいのですが、疲れたのでそのまま）。

で、今回はCSS3で採用された、Web Fontというのを使ってみました。これまでブラウザでの表示は、当然ながら各PCなどにインストールされているフォントを使うのですが、Web Fontは表示を行う際にサーバー側からフォントをダウンロードしてそれを使って表示するという仕組みになります。

メリットとしては、MacでもWindowsでも見え方が同じになるということ。例えばCSSでFont-Familyにメイリオを指定してもMacでメイリオをインストールしている人はほとんどいないでしょう。逆にヒラギノフォントをWindowsにインストールしている人も多くはないはずです。

デメリットとしては、インストールされていないフォントは、いちいちダウンロードするので表示が遅くなります。欧文フォントであれば、大抵200～300KBに収まるのでほとんど問題はありませんが、日本語フォントは数MBになる（多くは2MB前後）のであまり現実的ではありません。

というわけで、今回は「Open Sans」というフォントを使用してみました。もっと違いがわかりやすいフォントを使えばいいのですが、なかなか気に入るのがなくて……（先週末あたりはちょっと変わったフォントでロゴが表示されていたのを見た人もいるのではないかと思います）。なお、Web Fontを使用する際はFontのライセンスに注意が必要です。

Web Fontの使い方は、FontをサーバにアップしてCSSに
[css]
@font-face {
font-family: Open Sans;
src: url("Opens Sans.ttf") format("truetype");
}
[/css]

などと書いていけばいいのですが、ブラウザによって書式が微妙に違ったりするので、かなり面倒です。なので今回はGoogleの提供しているGoogle Web Fontsというサービスを使いました。

サイトにいってフォントを選ぶと、

[html]
<link href=’http://fonts.googleapis.com/css?family=Open+Sans’ rel=’stylesheet’ type=’text/css’>
[/html]

こんなコードが発行されるので、それを～に入れるだけです。あとはそのフォントを使いたいところで、

[css]
font-family: ‘Open Sans’, sans-serif;
[/css]
のようにCSSでfont-familyを指定すればOK。

<link href~>にオプションを付けると必要な文字だけ取り出してファイルサイズを小さくしたりすることも可能なようです。

本音を言えば日本語フォントで使いたいのですが、やっぱりサイズがネックかなぁ。ひらがなだけとかならなんとかなるかもしれないけど。そういえば、AndroidでおなじみのモトヤフォントやM+IPAあたりはWeb Fontでも使用可能だそうです（ライセンス的に）。

Google Web Fontのようなサービスで日本語フォントを提供しているのは、デコもじ、Font+がありますが、どちらも有料サービスです。これ以外にもモリサワフォントがTypeSquareというサービスを年内に立ち上げることを8月に発表しています。

Web Fontはひょっとしたらこれから面白くなってくる分野かもしれませんね。