littlepad blog

TumblrでWebフォントを使用するときにハマった

littlepad

現象

フォントをTumblrのスタティックサーバにアップロードし、CSS側のfont-faceにURL指定してもうまく認識してくれなかった。ローカル環境でローカルのフォント指定だと問題なく表示されていたが、Tumblrテンプレートにはめるとうまくフォントを認識してくれない。

原因

Tumblrはスタティックなコンテンツが “http://static.tumblr.com” 以下に格納されるので、クロスドメイン制限の問題でIE、Firefoxの一部のバージョンで認識してくれないっぽい。
通常、これを解決するためにはクロスドメイン参照先サーバの.htaccessにフォントファイルへのアクセスを許可するように設定する必要があるが、Tumblrではそれが出来ないので下記のように対応した。

対応

WoffのみBASE64エンコードして、フォント指定をData URIに置き換えた。
CSS内にフォントデータを直接記述する形になるので重いフォントの場合はパフォーマンス的に良くないが、今回フォントデータ（アイコンなどのグリフ類をまとめたもの）のサイズが2KBだったのでOKとした。

@font-face {
    /* Regacy IE */    font-family: "glyph";
    src: url('http://static.tumblr.com/abcdefg/012345678/glyph.eot');
}

@font-face {
    font-family: "glyph";
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */    src: url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAUIAAo...3AAAA==') format("woff"),
    /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5, Android, iOS */    url('http://static.tumblr.com/abcdefg/012345678/glyph.ttf') format("truetype");
}

参考

モバイルバージョンを終了