web-dev-qa-db-ja.com

フォントに関するFont-Awesomeエラー404

私は何が起こっているのかわかりませんが、ブラウザコンソールでフォントに関連する3つのエラーを見ることができます

 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff2?v=4.3.0 
 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff?v=4.3.0
 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.ttf?v=4.3.0

私は自分でこれを理解することはできませんが、それはばかげていることを知っていますが、私のindex.htmlにはこのようなものがあります

<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />

フォントのすごいことに関連するのはそれだけです。すでにパスをチェックしていますが、それは間違いではありません。

これはあなた方の誰とでも起こっていますか？

enter image description here

UPDATE

これはNGINXの部分で、ヘッダーにコンテンツをロードします

add_header Content-Security-Policy "style-src 'self' 'unsafe-inline'
https://fonts.googleapis.com
https://fonts.gstatic.com
https://themes.googleusercontent.com
https://assets.zendesk.com;
font-src 'self' https://themes.googleusercontent.com
https://fonts.gstatic.com;";
cssfontsfont-awesome
63
Non

.woffをアプリケーションサーバーのMIMEタイプ（iis-> mime type）にapplication/font-woffとして追加します

72
Gomes

さらに良いことに、このセクションをweb.configに追加すると、それらのMIMEタイプが、デプロイ先のサーバー上のIISに自動的に追加されます。 （削除は、既に存在する場合の重複MIMEタイプのエラーを回避することです）

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/x-woff" />
    </staticContent>  
  </system.webServer>
125
jhoelz

私もiisで同じ問題を抱えていました。ファイル拡張子として「.woff2」、MIMEタイプとして「font/x-woff」を使用して新しいMIMEタイプを追加し、問題を解決しました。

8
AngelsGR

1. IISに移動し、Webサイトを検索し、MIMEタイプを検索します 追加をクリックします

2.添付ファイル名に「woff2」を入れて、MIMEタイプに「application/font-woff」を入れます

3. IISでWebサイトを再起動します

6
Choco Li

指定したURLはすべて無効であり、リソースにリンクしていません。私たちのいずれかがあなたの投稿から知ることができる限り-彼らは単に存在しません。

目的のフォルダー構造に合わせてファイルを正しくアップロードしましたか？

3
xengravity

Apache2 Webサーバーのみを許可する「cPanel共有ホストサーバー」でもまったく同じ問題が発生していました。 「Access-Control-Allow-Origin」の値のワイルドカード（*）は共有ホストのセキュリティ設定で許可されていないため（帯域幅とリソース泥棒が原因）、それを機能させる別の方法を見つけ出す必要がありました。

OPが尋ねたこの質問はnginxを推測しますが、受け入れられ、最も支持された答えはIISに対するもののようです。 ApacheでCORSの「許可」に関連するApache2ソリューションを探しているこの質問に出くわす人（私のような人）がいるかもしれないので、この問題を解決するための魔法の弾丸がここにありました。 .htaccessファイルのWPサイトのルートディレクトリのティッピートップに次を追加しました。

<IfModule mod_headers.c>
 <IfModule mod_rewrite.c>
    SetEnvIf Origin "http(s)?://(.+\.)?(othersite\.com|mywebsite\.com)(:\d{1,5})?$" CORS=$0
    Header set Access-Control-Allow-Origin "%{CORS}e" env=CORS
    Header merge  Vary "Origin"
 </IfModule>
</IfModule>

この素晴らしいRegEXマジックの功績を称賛したいのですが、この投稿コメントで、このソリューションをどのように導き出したかを、同様の質問へのコメントとしてここに説明します： Access-Control-Allow-Origin wildcard subdomains 、ポートおよびプロトコル

**明らかな注：ドメイン名を自分のものに一致するように変更する必要があります。 （|）RegEx ORを削除して、すべてのサブドメインとルートレベルドメイン名がRegExで受け入れられる単一のドメイン名を使用することができます。

1
kanidrive

上記の解決策のいずれも、次の解決策を除いて私にとってはうまくいきませんでした。 BundleConfig.csファイルのすべての「bundles.Add」コマンドの後に、次の行を追加してください。

BundleTable.EnableOptimizations = false;
0
Luis Gouveia

以下に移動します： http://fortawesome.github.io/Font-Awesome/get-started/

... Bootstrap CDNを使用して、1行のコードでFont AwesomeをWebサイトに追加します。ダウンロードもインストールも必要ありません！」

0
Mr. William Michael

まったく同じ問題とエラーがありました。 Font-Awesomeライブラリを削除し、最新バージョンをインストールすることで問題が解決しました。

0
dmcdekker

.woff2をアプリケーションサーバーのmimeタイプ（iis-> mime type）にapplication/font-woffとして追加します

私にとってはうまくいきました。

楽しい ！！！

:)

0
Anrorathod