WP Google Fontsを使う

  • Wednesday, February 29, 2012

weeeb fooont

昨日に引き続きWordPress関連など。どうしたオレ。

ブログデザイン変えても相変わらず装飾的要素皆無なわけですが、そんな味気ない中にちょっと目を引く要素をとheader部分にWebフォント使ってみました。上のちょっとホラーな文字もWebフォントです。
Webフォントとはなんぞや!CSS3の機能で、サーバーに置いたフォントをCSSで読み込むというもの。……恥ずかしながらつい先日知りました。おほほ。

キャプションやタイトルなどにOS標準フォント以外のちょっと目を引く書体使ってみたいときありますよね。そんなときは閲覧者のローカル環境に依存しないよう画像化するしかないわけですが、画像にすると文字変更時にいちいち切り出さなきゃならない。面倒。何より僕はコンテンツ以外のデザイン要素にできるだけ画像使いたくない派。
しかし、いざWebフォント使ってみようと思っても、Webフォントとして使えるフォントを買わねばだったり、フリーだとしてもサーバにアップロードせねばならないので安定したサーバ環境も要求される…。

そこで、WordPressのWeb Fontプラグイン『WP Google Fonts』。
Googleがオープンソースとして公開しているGoogle Web Fontsを簡単に利用することのできるプラグインです。

使い方は、”Select Font”でGoogle Web Fontsで公開されてるフォントを選び、”Elements you want to assign this font to”で指定するタグを選べます。”Custom CSS”に#webfontsample { font-family:Creepster; } といった風に記述すればidやclassで指定できるので部分的に使うこともできます。
確認した限りではWindows XP/IE8,Chrome,FireFoxでも問題なく表示されます。

Google Web Fontsは英字のみなので使い方を限定しますが、カテゴリタグとか文字の意味自体が装飾的なものなど、けっこう使えると思います。

………

ところで、Google Web Fonts以外にも日本語をWebフォントにできないものかとIPAフォントあたりを試してみようかと思いましたが、どうも「派生プログラムの再配布」に該当しそうです…。そもそもフォントの容量が5MBぐらいあるのでWebフォントとして使うには現実的じゃないのかも。日本語(2バイト文字)は文字も多いししょうがないか。
はんなり明朝とか使ってみたかったな…。

日本語Webフォントと言えば、モリサワの『Type Square』というクラウドフォントサービスが、先日2/22にリリースされたのですが、Windows環境ではちょっと微妙なようで…。(参照: モリサワTypeSquareを比較してみる)
キャッチコピーとか見出しなど、フォントサイズが大きければ一応問題無さそうですが、Windows環境への完全最適化が待たれますね。

このType Squareの、PVに応じた通常価格は一般利用には高いですが、企業サイトとかキャンペーンとかには有効だと思いますし、余計なデザインするぐらいなら、言葉と書体にお金かけたほうが伝わる事も多かったりするんじゃないかなと思ったりするのでありました。
2012年いっぱい無料キャンペーン実施中なので試しに使ってみてはいかがでしょう。

© KOJI KOMIYA.