Ich verwende @font-faceauf der Website meines Unternehmens und es funktioniert / sieht gut aus. Außer Firefox und Chrome werfen einen 404-Fehler in die .woffDatei. IE wirft den Fehler nicht aus. Ich habe die Schriftarten im Stammverzeichnis, aber ich habe versucht, die Schriftarten im CSS-Ordner zu verwenden und sogar die gesamte URL für die Schriftart anzugeben. Wenn ich diese Schriftarten aus meiner CSS-Datei entferne, erhalte ich keine 404, daher weiß ich, dass es sich nicht um einen Syntaxfehler handelt.

Außerdem habe ich das Fontsquirrels-Tool verwendet, um die @font-faceSchriftarten und den Code zu erstellen :

@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;
}

Ich hatte das gleiche Symptom - 404 bei Woff-Dateien in Chrome - und führte eine Anwendung auf einem Windows Server mit IIS 6 aus.

Wenn Sie sich in derselben Situation befinden, können Sie dies wie folgt beheben:

Lösung 1

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

Update: Laut MIME-Typen für Woff-Schriftarten und Grsmto ist der eigentliche MIME-Typ application / x-font-woff (zumindest für Chrome). x-woff behebt Chrome 404s, x-font-woff behebt Chrome-Warnungen.

Ab 2017 : Woff-Schriftarten wurden nun im Rahmen der RFC8081-Spezifikation auf den MIME- Typ font/woffund standardisiert font/woff2.

Vielen Dank an Seb Duggan: http://sebduggan.com/posts/serving-web-fonts-from-iis

Lösung 2

Sie können die MIME-Typen auch in der Webkonfiguration hinzufügen :

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

Die Antwort auf diesen Beitrag war sehr hilfreich und sparte viel Zeit. Ich stellte jedoch fest, dass ich bei der Verwendung FontAwesome 4.50eine zusätzliche Konfiguration für den woff2Erweiterungstyp hinzufügen musste, wie unten gezeigt. Andernfalls gab die Anforderung für den woff2Typ in den Chrome-Entwicklertools unter Konsole> Fehler einen 404-Fehler aus.

Laut dem Kommentar von S.Serp sollte die folgende Konfiguration in das <system.webServer>Tag eingefügt 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 Antwort von @Ian Robinson gut, aber Chrome wird sich weiterhin mit der folgenden Meldung beschweren: " Ressource als Schriftart interpretiert, aber mit Anwendung vom Typ MIME / x-woff übertragen "

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

Anwendung / x-woff

zu

application / x -font -woff

und Sie werden keine Chrome-Konsolenfehler mehr haben!

(getestet auf Chrome 17)

Lösung für IIS7

Ich bin auch auf das gleiche Problem gestoßen. Ich denke, diese Konfiguration von der Serverebene aus wäre besser, da sie für alle Websites gilt.

1. Gehen Sie zum IIS- Stammknoten und doppelklicken Sie auf die Konfigurationsoption "MIME-Typen"

2. Klicken Sie oben rechts im Aktionsfenster auf den Link "Hinzufügen".

3. Dies öffnet einen Dialog. Fügen Sie die Dateierweiterung .woff hinzu und geben Sie "application / x-font-woff" als entsprechenden MIME-Typ an.

Fügen Sie den MIME-Typ für die Dateierweiterung .woff hinzu

Folgendes habe ich getan, um das Problem in IIS 7 zu lösen

Zusätzlich zu Ians Antwort musste ich die Font-Erweiterungen im Anforderungsfilterungsmodul zulassen, damit es 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>

Führen Sie den IIS-Server-Manager aus (Befehl ausführen: inetmgr). Öffnen Sie MIME-Typen und fügen Sie Folgendes hinzu

Dateinamenerweiterung: .woff

MIME-Typ : Anwendung / Oktett-Stream

Ich habe eine Menge Dinge über Berechtigungen, MIME-Typen usw. ausprobiert, aber für mich war es schließlich so, dass die web.config den Handler für statische Dateien in IIS entfernt und ihn dann explizit für Verzeichnisse mit statischen Dateien wieder hinzugefügt hat. Sobald ich einen Standortknoten für mein Verzeichnis hinzugefügt und den Handler wieder hinzugefügt habe, erhielten die Anforderungen keine 404s mehr.

Wenn Sie CodeIgniter unter IIS7 verwenden:

In der Datei web.config, fügt woff zum 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>

Ich hoffe es hilft !

Dies mag offensichtlich sein, hat mich aber mehrmals mit 404s gestolpert ... Stellen Sie sicher, dass die Berechtigungen für den Schriftartenordner richtig eingestellt sind.

Überprüfen Sie auch Ihren URL-Umschreiber. Es kann 404 werfen, wenn etwas "Seltsames" gefunden wurde.

Wenn Sie keinen Zugriff auf Ihre Webserver-Konfiguration haben, können Sie die Schriftartdatei auch einfach umbenennen, sodass sie in svg endet (aber das Format beibehalten). Funktioniert gut für mich in Chrome und Firefox.

Wenn dies nach dem Hinzufügen von MIME-Typen immer noch nicht funktioniert, überprüfen Sie, ob "Anonyme Authentifizierung" im Abschnitt "Authentifizierung" auf der Site aktiviert ist, und wählen Sie "Anwendungspoolidentität" gemäß dem angegebenen Screenshot aus.

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

Ich habe es gelöst:

Ich musste die Mo'Bulletproofer-Methode anwenden