Google Font APIを試してみた。

本来ウェブページでは閲覧環境にあるフォントでしか表示ができませんが、サーバーにフォントファイルをアップして、そのフォントを使ってページを表示するWebフォントという技術が一般化してきています。

ただしWebフォントはブラウザ間で仕様が若干異なったり、ライセンスの問題が微妙にクリアでないなど、気軽に使うにはまだちょっと・・・ってな雰囲気。

で、その雰囲気の中昨年リリースされたのがGoogle Font APIです。Googleが提供するGoogle Font DirectoryというオープンソースのWebフォント集から自由にフォントを指定できるという代物。フォントの数は限られるものの、その中からであればサイトの文字を好きなフォントで表示できます。

個人的にはまたGoogle様か、と。Google様が居なくなったら僕は一体どうなってしまうのか、なんて結婚詐欺師に入れ込んでる三十男みたいなことも考えたりするのですが、とりあえず目先の便利な物はどんどん利用してしまおうという腹黒い考えにシンプルに後押しされ、ちょっと試してみました。

利用はとても簡単でした。
まずは、ヘッダに下記の一文を追加。

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

Font+Nameのところに、Google Font Directoryから選んだフォント名を入れます。(今回サンプルではFontdiner Swankyというフォントを選択)

次に、CSSでフォントを指定します。

こうか

CSS selector {
font-family: 'Font Name', serif;
}

もしくはインラインでこう

<div style="font-family: 'Font Name', serif;">Life is Grand Line</div>

すると、こう表示されます。これだけ。

Life is Grand Line by Monkey D Luffy

・・・え、これだけ?

簡単すぎますよね。だって前フリの文章のとこのほうが明らかに文字数多いし。

Webフォント自体は既に確立されつつある技術ではあって、きちんと書けばきちんと使えるものではあるらしいです。でもフォントを変換してアップロードしたり、そのフォントはIEだけ形式が違ったり、記述に一工夫する必要なんかもありそう。

ただこれからCSS3が一般化していくのであれば、ちゃんと把握しておいた方がいい技術ではあるので、それはそれでまた試してみようかと思います。