Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
17
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

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

結論から言うと、解決したのですが、そもそも対応があってるのかわからないので、もっとよいやり方がありましたら教えていただけると、丸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置いとくだけでいけました。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
17
Help us understand the problem. What are the problem?