Bulletproofな@font-face記述だと、Androidでウェブフォントを適用できない

安全な@font-faceの書き方(抄訳)を参考に

@font-face {
    font-family: Textar;
    src: url('/media/fonts/textar-min.eot');
    src: local(Textar),
         url("/media/fonts/textar-min.woff") format("woff"),
         url("/media/fonts/textar-min.ttf") format("truetype"),
         url("/media/fonts/textar-min.svg#Textar") format("svg");
}

というCSSを書いて、GoogleのWebFont Loaderでウェブフォントを適用するというテストページを作ったのだが、Xperiaだとうまく適用されないという報告をいただいた。

「なんで？」と思って、AndroidSDKでXperiaをエミュレートして検証してみたところ、Androidの標準ブラウザでは、local()を指定した@font-faceのsrc属性は無視されることが分かった。この挙動は最新のAndroid2.2でも変わらない¹。

AndroidのUserAgentを持つ端末に以下のようなCSSを与えると、ウェブフォントはきちんと適用された。

@font-face {
    font-family: Textar;
    src: url("/media/fonts/textar-min.ttf") format("truetype");
}

この検証が終わった後、ウェブを見ると、@font-face gotchasに以下のようなコメントがあるのを見つけた。

Be advised that the bulletproof and bulletproof smiley methods you propose here do not work on Android phones! My User-Agent is "Mozilla/5.0 (Linux; U; Android 1.6; en-us; T-Mobile myTouch 3G Build/DMD64) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1".
Android does support @font-face and the double declaration method works fine. It appears to be choking on the local() line, ignoring everything after local.

これに早く気づいていたらなあ。

---

1. ちなみにAndroid2.0および2.1ではウェブフォントがなぜか使用できなくなっている(参照)。2.2からまた使用可能。