Bootstrap3を利用した際、Chromeのデバッグトレースで、拡張子woff2のフォントを読み込もうとしてResource interpreted as Font but transferred with MIME type text/plainがスローされるときの対処

タイトルが長いですが… 拡張子 woff2 の…コンテンツが読めなかったのでテキストで読みました、とトレースログが出ます。

これの解決法は、Webサーバないしばアプリケーションサーバにてmimeマッピングを追加するだけです。

Apache Tomcatであれば、サーバのweb.xmlを開き、<mime-mapping>あたりですね。woffでファイル内を検索するとすぐに見つかります。

web.xml

    <mime-mapping>
        <extension>wmz</extension>
        <mime-type>application/x-msmetafile</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>woff</extension>
        <mime-type>application/x-font-woff</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>wpd</extension>
        <mime-type>application/vnd.wordperfect</mime-type>
    </mime-mapping>

こうなっていますので、次のようにwoff2を追記します。

web.xml

    <mime-mapping>
        <extension>wmz</extension>
        <mime-type>application/x-msmetafile</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>woff</extension>
        <mime-type>application/x-font-woff</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>woff2</extension>
        <mime-type>application/x-font-woff</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>wpd</extension>
        <mime-type>application/vnd.wordperfect</mime-type>
    </mime-mapping>