☰

@font-face が woff ファイルで 404 エラーを返すのはなぜですか? 質問する

tag-icon • tag-icon css http-status-code-404 font-face woff
@font-face が woff ファイルで 404 エラーを返すのはなぜですか? 質問する

@font-face会社のサイトで使用していますが、動作も見た目も素晴らしいです。ただし、Firefox と Chrome.woffではファイルに対して 404 エラーが発生します。IE ではエラーは発生しません。フォントはルートにありますが、CSS フォルダー内のフォントを試し、フォントの URL 全体も指定しました。これらのフォントを CSS ファイルから削除すると 404 エラーが発生しないので、構文エラーではないことがわかります。

@font-faceまた、フォントとコードを作成するために fontsquirrels ツールを使用しました。

@font-face {
  font-family: 'LaurenCBrownRegular';
  src: url('/laurencb-webfont.eot');
  src: local('☺'), 
    url('/laurencb-webfont.woff') format('woff'), 
    url('/laurencb-webfont.ttf') format('truetype'), 
    url('/laurencb-webfont.svg#webfontaaFhOfws') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FontinSansRegular';
  src: url('/fontin_sans_r_45b-webfont.eot');
  src: local('☺'), 
    url('/fontin_sans_r_45b-webfont.woff') format('woff'), 
    url('/fontin_sans_r_45b-webfont.ttf') format('truetype'), 
    url('/fontin_sans_r_45b-webfont.svg#webfontKJHTwWCi') format('svg');
  font-weight: normal;
  font-style: normal;
}

ベストアンサー1

私も同じ症状 (Chrome の woff ファイルで 404) を経験しており、IIS 6 を搭載した Windows Server でアプリケーションを実行していました。

同じ状況にある場合は、次の手順で修正できます。

解決策1

「IIS マネージャー (Web サイトのプロパティの HTTP ヘッダー タブ) から次の MIME タイプ宣言を追加するだけです: .woff application/x-woff 」

更新：によるとwoff フォントの MIME タイプそしてグルスムト実際の MIME タイプは application/x-font-woff です (少なくとも Chrome の場合)。x-woff は Chrome 404 を修正し、x-font-woff は Chrome の警告を修正します。

2017年現在：Woffフォントは、RFC8081仕様MIME タイプfont/woffとfont/woff2。

IIS 6 MIME タイプ

Seb Dugganに感謝します:http://sebduggan.com/posts/serving-web-fonts-from-iis

解決策2

Web 設定で MIME タイプを追加することもできます。

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
    </staticContent>    
  </system.webServer>

おすすめ記事