【助けて】さくらのサーバーだとIE9以降でwebfontが文字化けする

結論から言うと、解決したのですが、そもそも対応があってるのかわからないので、もっとよいやり方がありましたら教えていただけると、丸２日間「IEシネ！IE死ね！」と叫び続けて憔悴しきった僕の心が救われます。

webfontのクロスドメイン問題

そもそも、webfont使う時にまずこの対策をしとかないとダメなんですが、どうやらさくらのサーバーでは効かないというのが今回の問題の発端。通常のクロスドメイン対策はこちら。
IE9以降でwebfontが文字化けする原因と解決策

ようするにHTTPのレスポンスヘッダにAccess-Control-Allow-Originを加える処理（Header set）をapacheにさせてるということですね。

が、問題が発生。

さくらのサーバーではheaderが使えない

Header使える？ | .htaccess < Wiki | さくらのレンタルサーバ非公式FAQ

たぶん使えない。ヘッダを追加したい場合はCGIやPHPで出力するか、他の代替手段を考えてみる。

クソ野郎ぉ！！！！！！！！

てことで、phpで強引にheaderを書き換える方向で。

フォントファイルへのアクセスをphpでプロキシする

このあたりを読んでみていろいろ試した結果動いたコードが以下。

• さくらインターネットでmod_rewriteを使う
• mod_rewriteについて質問です（多分）。 現在「さくらのレンタル.. - 人力検索はてな
• 杉浦とホームページ製作～ＵＲＬを書き換えろ！「.htaccessに書く場合の注意」
• How to Embed Webfonts Properly and How to Solve the Ambiguous "CSS3111: @font-face encountered unknown error" - Marin Bezhanov

.htaccess

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType font/woff .woff

RewriteEngine on
RewriteBase /
RewriteRule (.*).(eot|eot#iefix|ttf|otf|woff)$ assets/fonts/proxy.php?url=$1.$2 [L]

proxy.php

<?php
header("Access-Control-Allow-Origin: *");
readfile($_GET['url']);
?>

1. 通常の手順も一応書いとく（もちろんさくらでは動かない）
2. AddTypeはなくても大丈夫かも（未確認）
3. RewriteBase /も必ず書く
4. RewriteRule フォントファイル プロキシまでの絶対パス
5. .htaccessをフォントディレクトリに配置

注意点は、

• RewriteRuleでプロキシまでの絶対パスの最初を/はじまりにしちゃうとダメ
• 最後の改行だ無いとダメ

僕は、assets/fonts/以下にフォントをまとめてごそっと入れてるのですが、なかには階層がネストしたものもあるけど、とりあえず
assets/fonts/直下に.htaccessとproxy.php置いとくだけでいけました。

ともかく解決して良かった…