web-dev-qa-db-ja.com

woffファイルで@ font-faceが404エラーをスローするのはなぜですか？

私は自分の会社のサイトで@font-faceを使っていますが、それはうまく動作します/素晴らしいです。 FirefoxとChromeを除くと.woffファイルに404エラーが発生します。 IEはエラーをスローしません。私はフォントをルートに配置していますが、cssフォルダにあるフォントを試してみて、フォントのURL全体を指定したこともあります。私のCSSファイルからそれらのフォントを削除しても404が出ないので構文エラーではないことがわかります。

また、私はfontsquirrelsツールを使って@font-faceフォントとコードを作成しました。

@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;
}
csshttp-status-code-404font-facewoff
414
dcp3450

私はこれと同じ症状（Chromeのwoffファイルで404）を経験していて、IIS 6を使用してWindows Server上でアプリケーションを実行していました。

同じ状況にある場合は、次のようにして修正できます。

解決策1

「IIS Manager（Webサイトのプロパティの[HTTPヘッダー]タブ）を使用して、次のMIMEタイプ宣言を単純に追加します。 .woff application/x-woff「

更新： woffフォントのMIMEタイプ と に従ってGrsmto 実際の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 Types

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

解決策2

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

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

この記事への答えはとても役に立ち、大きな時間の節約になりました。しかし、FontAwesome 4.50を使用するときは、woff2タイプの拡張子の追加設定を追加する必要があることもわかりました。そうしないと、woff2タイプに対するリクエストで、コンソールのエラーでChromeの開発者ツールに404エラーが発生しました。

S.Serpのコメントによると、以下の設定は<system.webServer>タグ内に配置する必要があります。

<staticContent>
  <remove fileExtension=".woff" />
  <!-- In case IIS already has this mime type -->
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  <remove fileExtension=".woff2" />
  <!-- In case IIS already has this mime type -->
  <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />
</staticContent>
50
Sunil

実際には@Ian Robinsonの答えはうまくいきますが、Chromeはそのメッセージを続けて文句を言うでしょう： "フォントとして解釈されたがMIMEタイプapplication/x-woff"

あなたがそれを得たら、あなたはから変更することができます

application/x-woff

に

アプリケーション/ x-フォント-woff

chromeコンソールのエラーはもう発生しません。

（Chrome 17でテスト済み）

44
Grsmto

IIS 7用のソリューション

私も同じ問題に遭遇しました。私はそれがすべてのウェブサイトに適用されるので私はサーバーレベルからこの設定をすることがより良いだろうと思います。

  1. IISルートノードに移動し、[MIMEの種類]設定オプションをダブルクリックします。

  2. 右上の[操作]パネルにある[追加]リンクをクリックします。

  3. これによりダイアログが表示されます。 .woffファイル拡張子を追加し、対応するMIMEタイプとして "application/x-font-woff"を指定してください。

.woffファイル名拡張子のMIMEタイプを追加する

Go to MIME Types

Add MIME Type

これは私がIIS 7の問題を解決するためにしたことです

15
Dhanuka777

Ianの答えに加えて、リクエストフィルタリングモジュールのフォント拡張子を有効にすることを許可しなければなりませんでした。

<system.webServer>
  <staticContent>
    <remove fileExtension=".woff" />
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
  </staticContent>
  <security>
      <requestFiltering>
          <fileExtensions>
              <add fileExtension=".woff" allowed="true" />
              <add fileExtension=".ttf" allowed="true" />
              <add fileExtension=".woff2" allowed="true" />
          </fileExtensions>
      </requestFiltering>
  </security>    
</system.webServer>
8
martinoss

IIS Server Managerを実行します（実行コマンド：inetmgr）。MIMEタイプを開き、以下を追加します。

ファイル名拡張子：.woff

MIMEタイプ：application/octet-stream

8
Thunder

私はパーミッション、MIMEタイプなどについてたくさんのことを試みましたが、結局のところ、web.configがIISのStaticファイルハンドラを削除し、それから静的ファイルを含むディレクトリに明示的にそれを追加し直したことになりました。ディレクトリにロケーションノードを追加し、ハンドラを追加し直すとすぐに、リクエストは404を取得できなくなりました。

1
Matt

IIS 7でCodeIgniterを使用している場合

Web.configファイルで、woffをパターンに追加します

<rule name="Rewrite CI Index">
  <match url=".*" />
    <conditions>
      <add input="{REQUEST_FILENAME}" pattern="css|js|jpg|jpeg|png|gif|ico|htm|html|woff" negate="true" />
    </conditions>
    <action type="Rewrite" url="index.php/{R:0}" />
 </rule>

それが役に立てば幸い ！

1
IvanJijon

Webサーバの設定にアクセスできない場合は、フォントファイルの名前を変更してsvgで終わるようにすることもできます（ただし形式は保持します）。 ChromeとFirefoxでは私には問題なく動作します。

0
Phil McCarty

これは明らかかもしれませんが、それは何度も404sで私をつまずかせました...フォントフォルダ許可が正しく設定されていることを確認してください。

0
Ecksley

それを解決しました：

私は使わなければならなかった Mo'Bulletprooferメソッド

0
dcp3450

URLリライタも確認してください。 「変な」何かが見つかった場合、404をスローする可能性があります。

0
Dmitriy Romanov

MIMEタイプを追加してもまだ動作しない場合は、サイトの[認証]セクションで[匿名認証]が有効になっているかどうかを確認し、スクリーンショットに従って[アプリケーションプールID]を選択してください。

enter image description here

0
Thinira