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

2015年3月11日 20:57 html/css — 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");
}

参考

コメントはまだありません

No comments yet.

TrackBack URL

Leave a comment

about

ハンドルネーム:littlepad
都内で WEB 制作(デザイン, html/css, Flash, MT, WordPress etc)をしているBOØWY研究家

category:

search:


archives:

GO TO PAGETOP