Warum ist @ font-face einen 404-Fehler auf woff Dateien zu werfen?

StackOverflow https://stackoverflow.com/questions/4015816

Frage

Ich verwende @font-face auf meiner Firma Website und es funktioniert / sieht gut aus. Außer Firefox und Chrome wird ein 404-Fehler auf der .woff Datei werfen. IE nicht den Fehler werfen. Ich habe die Schriften an der Wurzel liegt, aber ich habe mit den Schriften im CSS-Ordner versucht und sogar die gesamte URL für die Schriftart zu geben. Wenn die Schriften von meiner CSS-Datei entferne ich nicht bekommen, eine 404 damit ich weiß, es ist kein Syntaxfehler.

Auch benutzte ich fontsquirrels Werkzeug, um die @font-face Schriftarten zu erstellen und Code: 

@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;
}
War es hilfreich?

Lösung

Ich war das gleiche Symptom erleben - 404 auf woff Dateien in Chrome -. Und lief eine Anwendung auf einem Windows Server mit IIS 6

Wenn Sie in der gleichen Situation sind Sie können das Problem beheben, indem Sie folgendermaßen vorgehen:

Lösung 1

"Fügen Sie einfach die folgenden MIME-Typ Erklärungen über die IIS-Manager (Registerkarte HTTP-Header der Website-Eigenschaften): .woff application / x-woff "

Update: nach MIME-Typ für woff Schriftarten und Grsmto der tatsächliche MIME-Typ ist application / x-font-woff (für Chrome zumindest). x-woff behebt Chrome 404s, x-font-woff Chrome Warnungen beheben.

Ab 2017 : Woff Schriftarten haben nun im Rahmen der RFC8081-Spezifikation den MIME-Typ font/woff und font/woff2.

IIS 6 MIME-Typs

Dank Seb Duggan: http://sebduggan.com/posts/serving -Web-fonts-from-iis

Lösung 2

Sie können auch die MIME-Typen in der Web-Config hinzu: 

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

Andere Tipps

Die Antwort auf dieses Thema sehr hilfreich und eine große Zeitersparnis. Allerdings fand ich, dass, wenn FontAwesome 4.50 mit, habe ich auch eine zusätzliche Konfiguration für woff2 Art von Erweiterung hinzuzufügen hatte, wie unten sonst Anfragen nach woff2 Typ gezeigt wurde ein 404-Fehler in Chrome Developer Tools unter Konsole geben> Fehler.

Nach dem Kommentar von S.Serp sollte die unter Konfiguration innerhalb <system.webServer> Tages gesetzt werden. 

<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>

Eigentlich funktioniert die @Ian Robinson Antwort gut, aber Chrome wird auch weiterhin mit dieser Nachricht beschweren: " interpretiert Ressource als Font aber übertragen mit MIME-Typ application / x-woff "

Wenn Sie das bekommen, können Sie von ändern

  

application / x-woff

  

application / x -font -woff

und Sie erhalten keine Chrome-Konsole Fehler haben mehr!

(getestet auf Chrome 17)

Lösung für IIS7

Ich kam auch in der gleichen Ausgabe. Ich denke, tun diese Konfiguration von Server-Ebene besser wäre, da es für alle Websites gilt.

  1. Gehen Sie zu IIS Wurzelknoten und doppelklicken Sie auf den "MIME-Typen" Konfigurationsoption

  2. Klicken Sie auf „Hinzufügen“ Link im Bedienfeld Aktionen auf rechts oben.

  3. Dies wird ein Dialog aufgerufen. In .woff Dateierweiterung und geben Sie "Application / x-font-woff" wie der entsprechenden MIME-Typ.

In MIME-Typ für .woff Dateinamenerweiterung

Go zu MIME-Typ

Add MIME-Typ

Hier ist, was ich tat, um das Problem in IIS 7

lösen

Ausführen IIS Server Manager (run-Befehl: inetmgr) Öffnen Sie Mime-Typen und fügen Sie folgende

  

Dateinamenerweiterung: .woff

     

MIME-Typ : application / octet-stream

Neben Ian Antwort hatte ich die Schrifterweiterungen im Anforderungsmodul Filterung, damit sie funktioniert. 

<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>

habe ich versucht, eine Tonne von Dingen, um Berechtigungen, Mime-Typ, usw., aber für mich ist es am Ende ist, dass die web.config die statischen Datei-Handler in IIS entfernt hatte, und dann explizit zurück in für Verzeichnisse hinzugefügt, hätten statische Dateien. Sobald ich einen Ort Knoten für mein Verzeichnis und hinzugefügt, um die Handler zurück, hinzugefügt stoppten die Anfragen 404s bekommen.

Wenn Sie CodeIgniter unter IIS7 verwenden:

In der Datei web.config, fügen Sie woff Muster 

<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>

Hope, es hilft!

Dies mag offensichtlich sein, aber es hat mich mit 404s einige Male ... Achten Sie darauf, die Schriftarten Ordner-Berechtigungen korrekt eingestellt sind gestolpert.

Überprüfen Sie auch Ihre URL rewriter. Es kann 404 werfen, wenn etwas „seltsam“ gefunden wurde.

Wenn Sie den Zugriff auf den Webserver Config nicht haben, können Sie auch nur die Font-Datei umbenennen, so dass es in svg endet (aber behalten das Format). Funktioniert gut für mich in Chrome und Firefox.

Wenn noch funktioniert nicht nach dem MIME-Typen hinzufügen, überprüfen Sie bitte, ob „Anonyme Authentifizierung“ ist in der Website in Abschnitt Authentifizierung ermöglichen und sicherstellen, dass „Application Poolidentität“ wählen gemäß dem angegebenen Screenshot.

Gelöst es:

Ich hatte Mo'Bulletproofer Methode

IIS Dateityp: .woff Schriftart / x-woff (nicht application / x-woff oder application / x-font-woff)

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top