2011-10-14

レギュラー書式を持たないGoogle Webフォントの読み込み

Google Web Fontsで提供されているWebフォントの中にはレギュラー書式の無いものが幾つかあります。具体的にはAllanがそうです(他にもあります)。これらを利用する場合、必ずURLパラメータに書式の情報も付け加えなければなりません。WebのUIでコツコツ選んで利用する場合は既に加えられているので問題にならないのですが、API経由でURLを組み立てる場合は少し注意が必要になります。

API経由でWebフォントの一覧を取るとその中でAllanは以下のような形で返ってきます。

{
  "kind": "webfonts#webfont",
  "family": "Allan",
  "variants": [
    "bold"
  ],
  "subsets": [
    "latin"
  ]
},

variantsを見ればわかるようにregularが含まれていません。このことを無視して以下のようなURLでリクエストするとWebフォントのロードに失敗します。

http://fonts.googleapis.com/css?family=Allan

具体的には以下のような親切なエラーメッセージのCSSファイルが返ってきてしまいます。

/* Allan (style: normal, weight: 400) is not available */
/* However, style: normal, weight: bold is available */
/* Not supported. */

Allanが正常にロードされるようにするためには以下のようにコロン(:)に続けて書式も指定します。

http://fonts.googleapis.com/css?family=Allan:bold

書式として指定するのは当然variantsの値の1つ(以上)になります。variantsの各要素は、太字だからといってboldとは限らず700であったり、italicのみであったり、はたまたregularではなく400だったりと、様々な文字列なので決め打ちすることはできません。とは言うもののあまり難しく考える必要はなく、JavaScriptで書くなら、

var url = "//fonts.googleapis.com/css?family="
  + font.family.replace(/ /g, "+")
  + ":"
  + font.variants.join(","); 

などとしてvariantsの各要素をカンマでつなげて付け加えれば良いでしょう。