ENTEREAL

CSS3 Web Fontを使用する際のMIMEタイプ設定

まえがき

納品間近のプロジェクトにてCSS3のWeb Fontを使用していますが、WindowsOS(Windows8 64bit)上のSafari(5.1.7/7534.57.2)でページを開くとフォントファイルを読み込んだ際にコンソールに警告が表示される現象の問い合わせがありました。


調査

どうやら、正しくMIMEを設定しなくてはならないのですが、そこに間違いがあっての状況と推測されます。CentOS + Appachという構成なので、.htaccessにて設定するのですが、どこが間違っていて、何が正しいのか情報が錯そうしているようなのでまとめてみることにしました。

英語のサイトなどで軽く調べた感じとしても、同じく複数の情報が飛び交っています。

# For OpenType(.otf)
AddType font/otf .otf
AddType font/opentype .otf
AddType application/x-font-otf .otf
AddType application/x-font-opentype .otf
AddType application/octet-stream .otf
# For TrueType(.ttf)
AddType font/ttf .ttf
AddType font/truetype .ttf
AddType application/x-font-ttf .ttf
AddType application/x-font-truetype .ttf
AddType application/octet-stream .ttf
# For Microsoft Embedded OpenType(.eot)
AddType application/vnd.ms-fontobject .eot

# For Web Open Font Format(.woff)
AddType application/x-font-woff .woff
AddType application/x-woff .woff

# For Scalable Vector Graphics Font(.svg)
AddType image/svg+xml .svg
AddType application/vnd.ms-fontobject .svg

などなど、一つのフォント形式に対し複数の設定情報が存在します。一体、どれが正しいのか???


結果

調査の結果、正しい答えはありませんでした。もっと言うと、全てが正しくもあり、間違いでもあるようです。

というのも、そもそも、それぞれブラウザの解釈の違いがあるようです。もともと、HTML5とCSS3が正式に規格/標準化されたとはいえ、未だにCSSでベンダープリフィクス(-moz-, -webkit-など)が使われている状況であり、フォントに関してもブラウザによって推進/推奨しているフォント形式や対応している形式が異なるなど、様々な利害関係の影響からか、MIME形式も標準化されていないのが、現状のようです。

参考:管理団体IANA(Internet Assigned Numbers Authority) [http://www.iana.org/assignments/media-types]

そもそも、メディアタイプとしてfontは定義されていないので、AddType font/...となっているものは間違いとなる可能性が大です。


結論

ということで、MIMEの定義などを踏まえつつ、今回はひとまず「」で下記を採用し、今後、標準化が行われた段階でアップデートするのが最善という結論に至りました。

# For Web Font
AddType application/x-font-otf .otf
AddType application/x-font-ttf .ttf
AddType application/x-font-woff .woff
AddType application/vnd.ms-fontobject .eot
AddType image/svg+xml .svg

Tags

Same Category