Google-Warnung: Ressource als Schriftart interpretiert, aber mit Anwendung / Oktett-Stream vom Typ MIME übertragen

68

Ich habe in Google eine Warnung für mein Schriftbild:

Ressource als Schriftart interpretiert, aber mit MIME-Typ application / octet-stream übertragen: "... / Content / Fonts / iconFont.ttf".

Es funktioniert auch, wenn ich diese Warnung habe, aber ich bevorzuge es, diese Warnung zu vermeiden.

Hier ist meine Zollerklärung:

@font-face {
  font-family: 'iconFont';
     src: url('../Fonts/iconFont.eot?#iefix') format('embedded-opentype'), 
     url('../Fonts/iconFont.svg#iconFont') format('image/svg+xml'), 
     url('../Fonts/iconFont.woff') format('font/x-woff'), 
     url('../Fonts/iconFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Ich suche bereits nach anderen Posts, habe aber bisher kein Glück.

Bitte beachten Sie, dass mein Server IIS von Microsoft ist.

Irgendeine Idee, wie ich diese Warnung vermeiden kann?

Vielen Dank.

Bronzato
quelle

Antworten:

88

Sie müssen einem .htaccess / IIS die folgenden Typen hinzufügen:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/font-woff .woff  

Aktualisierter .woff-Typ von:

AddType application/x-font-woff .woff

(Vielen Dank an @renadeen in den Kommentaren unten für den Hinweis.)

Schauen Sie sich hier meine Antwort auf eine ähnliche Frage an: Schriftart nicht geladen

Von hier genommen: Schriftproblem in Chrom .

97ldave
quelle
Ich habe diese 4 Zeilen am Ende meiner Datei hinzugefügt, aber ich erhalte immer noch den Fehler. Wie lange dauert es, bis dies funktioniert?
Michiel
Haben Sie versucht, Ihren Webserver zurückzusetzen / neu zu starten? IIS? Haben Sie auch die 2 Links in meiner Antwort überprüft?
97ldave
Ich verwende keinen Webserver - wie können Sie dies ohne einen beheben?
d13
11
Nach dieser Antwort application/x-font-woff wurde application/font-woff.
Renadeen
46

Vielen Dank für die obige Antwort @ 97ldave. Sie können diese Typen zu Ihrem IIS-WebServer-Konfigurationsabschnitt hinzufügen, wenn Sie sie nicht direkt zu Ihren MIME-Typen in Ihrem IIS-Setup hinzufügen möchten. Das Folgende zeigt ein Beispiel für das Hinzufügen nur des .woff-Typs, der in unserer Konfiguration fehlte. Dies behebt die Probleme mit den Schriftarten, die in der neuesten Version von Safari (6.0.3) auf meinem iMac nicht angezeigt werden.

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

Vielen Dank an Jon Samwell (meinen Kollegen), der das herausgefunden hat.

Der Senator
quelle
@ Der Senator: Danke!
Varun Rathore
5
Ich denke, dass der Kommentar zu der aktuell akzeptierten Antwort bezüglich des Entfernens x-des MIME-Typs auch für diese Antwort gilt.
Tom Fenech
2
Vielen Dank! Ich habe diese beiden Zeilen auch basierend auf Ihrer Antwort hinzugefügt (Semantic-UI verwendet sie) <remove fileExtension = ". Woff 2 " /> <mimeMap fileExtension = ". Woff 2 " mimeType = "application / x-font-woff" />
Mike123
26

Für Nginx: (Pfad: /etc/nginx/mime.types)

font/ttf                         ttf;
font/otf                         otf;
application/x-font-woff          woff;

Das brauchst du nicht application/vnd.ms-fontobject eot; weil es bereits existiert.

Nach diesem Neustart Nginx: service nginx restart

Getan.

Steven
quelle
1
Vielen Dank, dass Sie mir eine weitere Google-Suche erspart haben :)
Simon
1
Kein Problem, Kumpel :). | Wenn Sie die Warnung mit font-awesome ( fortawesome.github.io/Font-Awesome ) erhalten, fügen Sie diese einfach in Ihre Nginx Mime Type-Datei ein: application / x-font-woff .woff
Steven
10

Richtige MIME-Typen für Schriftarten sind:

application/font-ttf              ttf;
application/font-otf              otf;
application/font-woff             woff;
Sven
quelle
3

Wenn Sie einen Server mit nodeJS ausführen, ist dies ein nützliches Modul zum Zuordnen Ihrer MIME-Typen

https://github.com/broofa/node-mime

var mime = require('mime');

mime.lookup('/path/to/file.txt');         // => 'text/plain'
mime.lookup('file.txt');                  // => 'text/plain'
mime.lookup('.TXT');                      // => 'text/plain'
mime.lookup('htm');                       // => 'text/html'

mime.extension('text/html');                 // => 'html'
mime.extension('application/octet-stream');  // => 'bin'
Daan
quelle
Ich fügte das Wesentliche hinzu
Daan
1

Vielen Dank an @ the-senator und @ 97ldave für ihre Antworten

Für mich verschwindet der Fehler vollständig, sobald diese Zeilen zur web.config hinzugefügt wurden

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