Webサイトを構築する場合、フォントを指定します。例えば、Windowsでは通常「MS Pゴシック」を指定します。
何のために指定するのかというと、いかなる環境においても、なるべくサイトデザインに沿った、同じような見た目を保持するためです。
「MS Pゴシック」を指定するということは、Google ChromeやFirefoxなどブラウザに関係なく、OSのシステムフォントに「MS Pゴシック」がインストールされている場合に、それで表示するということです。
システムフォントに「MS Pゴシック」が存在することが前提なので、MacやLinuxなど、他のOSでは意図しないフォントで表示されてしまいます。
そのため、各OSに標準でインストールされているシステムフォントを考慮して、優先順位をつけてCSSでフォント指定をすることが一般的です。
body{
font-family: "ＭＳ Ｐゴシック",arial,helvetica,clean,sans-serif;
}
つまり、これまではシステムフォントの都合上、全ての環境で同じフォントで表現するといったことが不可能だったわけです。
その常識を覆すのが「Google web fonts」です。
これは、フォントをOSのシステムフォントを参照するのではなく、GoogleのAPIを参照することで、いかなる環境でも同じ体裁を保つ技術です。
Google Web Fonts
導入方法は簡単です。本サイトを参照しても分かるとおり、該当するフォントのjsを読み込み、cssで指定するだけです。
早速、このページのヘッダロゴに設定してみました。
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:regular,italic,bold,bolditalic&v1" rel="stylesheet" type="text/css" />
h1{
font-family: 'Droid Serif',serif;
}
利点としては、
- 全てのブラウザ環境でフォントデザインを統一できる
- CSS3と組み合わせれば画像がいらなくなりコンテンツのスリム化が図れるかも
欠点としては、
- 日本語に対応していない
- jsが外部リクエストなので表示されるまでに遅延が発生する
- APIなので今後の仕様変更に気を配る必要がある
まだベータ版なので、Googleはまだ改良の余地を残していると思います。
今後の動向に注目したいと思います。