[GAE/J] Bloggerで@font-faceによるWeb Fontを利用する方法

2012年6月26日火曜日

[GAE/J] Bloggerで@font-faceによるWeb Fontを利用する方法

Bloggerに@font-faceによるWeb Fontを利用しようと思ったのだが、思いのほか手間取ったのでメモ。
サーバ上にファイル置いたり、リクエストヘッダ弄ったりするのは分からない/めんどいという方は以下の方法をお試しあれ。
@font-faceによるWeb Fontの実装方法 (サーバへのフォント配置不要) - ログろいど

発端

Web Symbols typefaceという素晴らしいWeb Fontを見つけたので、ぜひBlogger上で利用したいと思った。
これがきっかけ。

Bloggerの制限と、@font-faceの制限

手間取るきっかけとなったBloggerと@font-faceの制限を以下にまとめる。

Bloggerの制限

Bloggerでは以下のような制限がある。

画像ファイル以外のファイルをホスティングする事が出来ない

これは前から把握していた。
そこで、Blogger上からファイル置場として利用できる環境を探った。(Googleが提供しているサービスのみ)
以下がBloggerで利用できるファイルホスティングサービス。

Google Site
Google App Engine (GAE)

前々からGAEをファイル置場として利用しているので、今回もGAEをセレクトした。
早速試してみる。
ん・・・フォントがダウンロードされていない。
レスポンスヘッダを見ると、Content-Length 0となっている。
どういう事だろう・・・。

@font-faceの制限

@font-face側の制限かと思い、@font-faceについて調べた。
すると、@font-faceには以下の制限があることが判明。

4.8.1 Default same-origin restriction

User agents must implement a same-origin restriction when loading fonts via the @font-face mechanism. This restriction limits the loading of fonts for a given document to fonts loaded from the same origin. Fonts can only be loaded via the same host, port, and method combination as the containing document, using the origin matching algorithm described in the [HTML5] specification. The origin of the stylesheet containing @font-face rules is not used when deciding whether a font is same origin or not, only the origin of the containing document is used. The restriction applies to all font types.

Some implementers would prefer to define a new mechanism (tentatively named From-Origin) to control access to all resource types, in preference to the origin matching algorithm referred to here. As such, this subsection should be considered at risk for alteration if such an alternative mechanism is defined.

Given a document located at http://example.com/page.html, fonts defined with ‘src’ definitions considered cross origin must not be loaded:

/* same origin (i.e. domain, protocol, port match document) */
src: url(fonts/simple.ttf);
src: url(//fonts/simple.ttf);

/* cross origin, different protocol */
src: url(https://example.com/fonts/simple.ttf);

/* cross origin, different domain */
src: url(http://another.example.com/fonts/simple.ttf);

4.8.2 Allowing cross-origin font loading

User agents must also implement the ability to relax this restriction using cross-site origin controls [CORS]. Sites can explicitly allow cross-site downloading of font data using the Access-Control-Allow-Origin HTTP header.

If an alternative mechanism to control resource loading (such as the suggested From-Origin HTTP header) is specified, the appropriate mechanism to relax the default same-origin restriction for @font-face may also change. As such, this subsection should be considered at risk for alteration if such an alternative mechanism is defined.

CSS Fonts Module Level 3

http://www.w3.org/TR/css3-fonts/

お～。
クロスドメインの制約に引っかかっていたのか。
Access-Control-Allow-Originをレスポンスヘッダに付与して回避しろと。
なるほど。

GAEでのCORS実装

レスポンスヘッダに Access-Control-Allow-Origin を付けろと言われても、GAEの static file のレスポンスにヘッダを追加するなんて機能はGAEで実装されていない。
となると、Java等で、レスポンスヘッダに Access-Control-Allow-Origin を付与するプログラムを書くしかない。
ということで、GAE/Jでレスポンスヘッダに Access-Control-Allow-Origin を付けるプログラムを書いた。
Blogger上で試してみると・・・OK。Web Fontが表示されている。

Web Symbolsのサンプル

%&'()*+,-./01234567:;<>?@ABCDFHIJKLMNOPQRSTUVWXZ[\]_`abcdefghijklmnopqrstuvwxyz{}~²³¹×

GAE以外での回避方法

Google Siteにファイルを置いても、Google SiteはBloggerのドメイン外なので、クロスドメイン通信となる。
また、Google Site側では、レスポンスヘッダに Access-Control-Allow-Origin を付けてくれたりという親切なことはしてくれない。
よって、プログラムを自分で書く以外に方法はないと思います。

プログラミングが苦手という方は、以下の方法で、Base64エンコードした内容をソース中に埋め込むか、Access-Control-Allow-Origin をヘッダに付与して返してくれるようなサービスを利用することになります。
@font-faceによるWeb Fontの実装方法 (サーバへのフォント配置不要) - ログろいど

参考までに

利用して良いかは不明ですが、Web Symbols typeface にホストされているフォントファイルは、Access-Control-Allow-Origin を付けてくれるので、Blogger上で利用可能です。
サイト内に利用可等明示されていないので、作者に確認が必要かと思いますが。
許可を得たうえで使用する場合は以下のような感じ。

@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('http://www.justbenicestudio.com/fonts/websymbols-regular-webfont.eot');
    src: url('http://www.justbenicestudio.com/fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.justbenicestudio.com/fonts/websymbols-regular-webfont.woff') format('woff'),
         url('http://www.justbenicestudio.com/fonts/websymbols-regular-webfont.ttf') format('truetype'),
         url('http://www.justbenicestudio.com/fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

ログろいど

2012年6月26日火曜日