Warum wirft @ font-face einen 404-Fehler auf woff-Dateien?

422

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;
}
dcp3450
quelle
Welche Version hast du für Firefox und Chrome? Gecko 1.9.2 (Firefox 3.6) bietet Unterstützung für WOFF.
Sotiris
Versuchen Sie erneut, die OTF in Woff umzuwandeln. Ich hatte ein ähnliches Problem und die Dateianalyse war beschädigt. Dies ist eine gute Seite, um sie in verschiedene Schriftarten umzuwandeln. onlinefontconverter.com
stacksonstacksonstacks

Antworten:

721

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.

IIS 6 MIME-Typen

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>
Ian Robinson
quelle
5
Beachten Sie, dass Cannot add duplicate collection entry of type ‘mimeMap’ with unique key attribute ‘fileExtension’...aufgrund eines Konflikts mit der Datei applicationhost.config möglicherweise ein Fehler angezeigt wird . Sie können dies beheben, indem Sie <remove fileExtension=".woff" />direkt vor der Angabe der neuen mimeMap in Ihrer web.config-Datei hinzufügen, um das falsche Duplikat zu entfernen.
Pete
11
Der MIME-Typ wurde standardisiert als application/font-woff.
Fernando Correia
5
Das hat es geschafft! Wenn Sie das gleiche Problem haben, aber mit der .woff2-Datei, fügen Sie einfach einen anderen MIME-Typ (oder eine andere Konfiguration) mit dieser Erweiterung hinzu
Mapache
2
Anscheinend hat sich die Spezifikation (wieder) geändert. Ihr Rat für application/x-font-woffist jetzt veraltet, ab RFC 8081 ist der richtige MIME-Typ jetzt font/woffund font/woff2. Siehe die aktualisierte Antwort in Ihrer verknüpften Frage
Liam
3
Diese Lösung hat bei mir nicht funktioniert. Was der Trick für mich war, war: hotcakescommerce.zendesk.com/hc/en-us/articles/…
Kim Lage
52

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>
Sunil
quelle
3
und Ihr erwähntes Tag <staticContent>muss sich in einem <system.webServer>Tag befinden
S.Serpooshan
Funktioniert einwandfrei und berichtet von Windows Server 2012 r2, ASP.Net MVC5.
Cromwell
44

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)

adriendenat
quelle
Wo ändern Sie das? Im Browser oder auf dem Server?
Jake Wilson
Wie in der obigen Antwort erläutert, muss es sich um den Server handeln. Diese Lösung ist für Windows Server mit IIS 6.
adriendenat
1
Chrom beschwert sich immer noch für mich mit x-font-woff
Sonic Soul
So wiederholen Sie meinen Kommentar : Es sieht so aus, als ob sich die Spezifikation (erneut) geändert hat. Ihr Rat für application/x-font-woffist jetzt veraltet, ab RFC 8081 ist der richtige MIME-Typ jetzt font/woffund font/woff2. Siehe die aktualisierte Antwort in Ihrer verknüpften Frage
Liam
15

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

Gehen Sie zu MIME-Typen

MIME-Typ hinzufügen

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

Dhanuka777
quelle
2
Beachten Sie, dass von Antworten nur mit Links abgeraten wird. SO-Antworten sollten der Endpunkt einer Suche nach einer Lösung sein (im Gegensatz zu einem weiteren Zwischenstopp von Referenzen, die im Laufe der Zeit veralten). Bitte fügen Sie hier eine eigenständige Zusammenfassung hinzu, wobei Sie den Link als Referenz behalten.
Kleopatra
@kleopatra - Die Antwort wurde mit Details aktualisiert und der Link entfernt.
Dhanuka777
"Ich denke, diese Konfiguration von der Serverebene aus wäre besser, da sie für alle Websites gilt." - Nun, das hängt wirklich davon ab. Wenn Sie es mit einem Unternehmensserver zu tun haben, auf dem möglicherweise mehrere interne Apps ausgeführt werden, haben Sie Recht. Wenn Sie dagegen eine öffentlich zugängliche Website betreiben, die auf mehrere Server verteilt ist, gewinnt die web.config-Methode hinsichtlich der "Konsistenz" (dh sie ist vorhanden, und Sie können nicht vergessen, sie auf einem zu konfigurieren Server).
Balázs
10

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>
Martinoss
quelle
8

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

Donner
quelle
1

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.

Matt
quelle
1

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 !

IvanJijon
quelle
0

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

Ecksley
quelle
0

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

Dmitriy Romanov
quelle
0

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.

Phil McCarty
quelle
0

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.

Geben Sie hier die Bildbeschreibung ein

Thinira
quelle
-1

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

Dhaworth
quelle
1
Können Sie bitte Ihre Antwort erweitern und detailliert angeben, wie das Problem gelöst wird?
Talex
-1

Ich habe es gelöst:

Ich musste die Mo'Bulletproofer-Methode anwenden

dcp3450
quelle
Bedeutet das, dass Sie WOFF nicht mehr verwenden? Könnte es sein, dass Ihr Webserver nicht richtig für die Bereitstellung von WOFF-Dateien konfiguriert ist? Beispiel: stackoverflow.com/questions/3594823/mime-type-for-woff-fonts/…
mercator
Ich habe die Schriftart mit der Codierung mit anderen Maschinen getestet. Zeigt gut und kein 404-Fehler an.
dcp3450
Es wird mich nicht lassen. Die Kodierung ist viel zu lang. Es wird hier erklärt: paulirish.com/2010/font-face-gotchas
dcp3450
1
Der Link in der Antwort existiert nicht mehr.
Munim Munna