まどか☆マギカのルーンフォントをはてダで使ってみたよ

主に海外の解析部隊の人達によって、まどか☆マギカの作中で使われてるルーン文字*1が解析されつつある解析完了したみたいです。
ご丁寧にもTrueTypeフォントがダウンロード出来るようになってたので、早速はてダで使ってみます。

まずMadokaRunes.ttfだけど、件のサイトへの直リンクは出来なさそうなので一旦別の場所にコピー。*2
IEではTrueTypeやOpenTypeのWebFontが使えず独自のEOT(Embedded Open Type)という形式のファイルが必要らしいのでeotファイルも作って置いておきます。*3
Firefoxでクロスドメインでwebfontファイルを取得する場合は、外部サイト側にアクセスコントロールヘッダによる許可が必要なので、フォントファイル置き場の .htaccess に↓とかを書いておきます。

header add Access-Control-Allow-Origin *

はてブのデザイン設定のスタイルシートに以下のCSSを追加します。*4

/* 『まどか☆マギカ』のルーン文字を使ってみよう */
@font-face {
  font-family: 'MadokaRunes';
  src: url('http://tmpspace.net/MadokaRunes.eot'); /* IE */
  src: url('http://tmpspace.net/MadokaRunes.ttf') format('truetype');
}
.madokarunes {
  font-family: MadokaRunes;
}

あとはおもむろに class="madokarunes" な span とかを書けばOK。小さいと見づらいのでfont-sizeも大きめにした方が良いみたいです。
Let's contract to me!

こんな感じ、クロスブラウザ対応がちょっと面倒だったけどWebFont便利だねー。
WenFontはiPhoneやAndroidでも使えます！このエントリを見ると、はてなのスマホ用デザインにされてしまいカスタムCSSが効かないですがページ下部にある「PC版」のリンク先で見れば上手く表示されると思います。

以上です。*5

*1:魔女文字フォントとかイヌカレーフォントとかとも呼ばれてるみたいです。

*2:とりあえず現状最新の2011-02-17バージョン最終版の2011-04-28バージョンに差し替えておきました

*3:ttf2eotというWEBサービスでttfからeotを作れます

*4:IEはformatを理解出来ないので最初のeotのみが適用される。その他ブラウザは後のsrcが勝つのでttfが適用される。

*5:QBネタを挟もうかと思ったが面白いネタが浮かばないので、睡魔のせいにして逃げ