はてなダイアリーでGoogle Font APIを使う

今日のWeb製作

Google Font API(& Google font directory)というのが出たのではてなで使おうっていうただそれだけ手短に。Webfontsについてはぼくそんなに詳しくないので説明しませんがすみません。

2010/11/01 追記: 記事の内容に落とし穴がありましたので、改稿しました。

  1. Google Font Directoryから使いたいフォントを探してGet the code。
  2. link rel="stylesheet"で呼び出す方法が書かれているが、これははてなダイアリーでは許可されていない。はてなダイアリーで使用するには、代わりに@importを使用するとよいだろう。
@import url(http://fonts.googleapis.com/css?family=HOGEHOGE);

但し、はてなダイアリーにおける@importの使用には、以下のような制限が存在する。

      • はてなダイアリー側の制限により、@importの使用は合計10回までである。
      • 同様に、@importの引数urlには「+」「:」「,」辺りの文字が使用できない。よって、(上で示したOFL Sorts Mill Goudy TTのように)フォント名に半角スペースを含むフォントの使用やregular以外のVariantsの取得(後述)はできない。

これら@importの制限を回避するには、


2010/11/01 追記 : どうやら上の手順でコードを取得すると、そのブラウザ向けに最適化されたCSSが吐き出されるらしい。つまり、他のブラウザで見た際にwebfontが適用されなくなってしまう可能性がある。クロスブラウザで完璧に動作させるには(そもそもGoogle Font APIは本来それを実現するためのものなのだが)、自分で改めてクロスブラウザ用に書き直す必要がある。

  • あるいは、URLを短縮URLサービスで圧縮し、それを@importに指定するのもよい。但しこの方法でも、恐らく完璧にクロスブラウザで動作させることはできないと思われる(未検証)。

あとは普通のフォントのように、フォント名を指定して使うだけ。ね、簡単でしょ？

というわけで、とりあえず試す時にはごちゃごちゃと使ってみたくなるもので、日付の表示にLobster、Flickr photoの表示にVollkornとInconsolataを使ってみた。日付の辺りとかこんな感じに表示されてますでしょうか。

実際のところ、5割ぐらいの人が正しく表示されていないと思われます。Google Font APIの対応ブラウザは以下の通り。

Google Chrome: version 4.249.4+
Mozilla Firefox: version: 3.5+
Apple Safari: version 3.1+
Microsoft Internet Explorer: version 6+
The Google Font API is not currently supported on iPhone, iPad, iPod, or Android.

FAQ - Google Font API - Google Code

ですが、IEではバージョンに関わらず全く表示できていないはずです。これは、はてなダイアリーのDOCTYPE宣言によってレンダリングが互換モードとなっており、さらにIEの互換モードに限ってはIE5.0相当のCSSしか解釈しないというオリジナリティあふれる仕様が存在するためです。他のブラウザでは互換モードでも最新のCSSを解釈することができるため、問題なく使用できます。Microsoftではこれを回避する手段としてX-UA-Compatibleというmeta要素による上書きDOCTYPEスイッチを用意していますが、これははてなダイアリーにおいて使用可能なmeta要素に含まれていません。使えるようにしてくれ！とはてなアイデアに出してはいますが、全く注目されていなくて非常にアレな感じですし例え注目されてもはてなは対応しないでしょう。まぁ、そういう会社ですし。

というわけで、はてなダイアリーにおいて2000年にリリースされたIE5.5レベル以上に凝ったデザインを行いたければIEユーザは切り捨てるしかありませんlolというおはなし。以上、技術系ピープルが多く集まるはてな村(笑)からお送りしました。まじうける〜(笑)

追記: 和欧混植について

ちょっと関係ないことですがついでなので、Google Font APIを使って和欧混植ができないかなーと試してみました。うまく行けば、この文章はアルファベットがDroid Sans、日本語はあなたのブラウザの既定フォント(sans-serif)で表示されるはずです。


Droid SansとMeiryoでの混植イメージ @ Google Chrome 5.0.375.55

記述は単純に、font-styleで欧文フォント→和文フォントの順に指定しただけ。あまりしっかりと調べたわけではないんですが、この方法で期待通りに和欧混植ができるのはChromeだけ(つまりWebkitだけ？)みたいです。他のブラウザでは表示が崩れるなど上手く混ぜてくれなかったり、欧文フォントの指定は無視されたり、はたまた和文フォントが指定してもいない謎フォントのにされてしまったりするようです。

現状では日本語本文にWebfontsを使用するのは現実的ではないわけですが(日本語フォントはファイルサイズがでかすぎるので)、もし混植という形でアルファベットだけでもWebfontsを使えるならばかなりいい感じかも…と思ったんですけどねー。残念。