web-dev-qa-db-ja.com

Font FaceはIIS 8.0で機能しません

Font Squirrelから生成されたプログラムにフォントフェイスがありますが、IISで動作させることができず、localhostで動作します。 MIMEタイプにapplication/font-woffarticle を追加しましたが、まだ動作しません。

Context
--Fonts
----font location
--css files

CSS

@font-face {
    font-family: 'wallStreetFont';
    src: url('Fonts/subway-webfont.eot');
    src: url('Fonts/subway-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fonts/subway-webfont.woff2') format('woff2'),
         url('Fonts/subway-webfont.woff') format('woff'),
         url('Fonts/subway-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

現在のMIMEを編集

デフォルトのIIS 8 MIMEfont/x-woffを使用しています

cssiisfontswoff2
115
joetinger

Font SquirrelフォントにWOFF2が含まれているのはすばらしいことです！ IIS 8はWOFFに追加されたmimeタイプを必要としませんが、WOFF2にはmimeタイプが必要です。 W3C 推奨 ：

application/font-woff2

WOFF2の詳細については、 here を参照してください。

IISでMIMEタイプを追加するには、次のようにWeb.Configを変更します。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <!-- ... -->
  <system.webServer>
    <!-- ... -->
    <staticContent>
      <!-- ... -->
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
252
Colin Bacon

IISでwoffおよびwoff2フォントを正しく機能させるには、次のMIMEタイプをWeb.Configファイルに追加する必要があります。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>  
  <system.webServer>    
    <staticContent>
        <remove fileExtension=".woff" />
        <remove fileExtension=".woff2" />
        <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
        <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>

それでもGoogle Chromeで404エラーが発生する場合は、ページをリロードする前にブラウザのキャッシュをクリアする必要があります。

75
Varun

IIS Manager内でMIMEタイプを構成することもできます。 Webサイトを選択して、メインペインのIISの下にある[MIMEタイプ]アイコンをダブルクリックします。

enter image description here

その後、既存のすべてのMIMEタイプのリストが表示され、右ペインの[追加...]リンクを使用して新しいタイプを追加できるようになります。

24
Scott Munro