Edited at

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

More than 5 years have passed since last update.

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


webfontのクロスドメイン問題

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

IE9以降でwebfontが文字化けする原因と解決策

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

が、問題が発生。


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

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


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


クソ野郎ぉ!!!!!!!!

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


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

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

<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/直下に.htaccessproxy.php置いとくだけでいけました。

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