Falscher MIME-Typ für @font-face in Chrome

Beim Versuch, eine benutzerdefinierte Schriftart mithilfe der @font-face-Deklaration in Chrome zu implementieren , können Entwickler auf die Fehlermeldung „Ressource als Schriftart interpretiert, aber mit MIME-Typ application/octet-stream übertragen“ stoßen. Dieses Problem ist auf eine Diskrepanz zwischen dem MIME-Typ der Schriftartdatei und dem in der Deklaration angegebenen erwarteten Typ zurückzuführen.

Um diese Diskrepanz zu beheben, kann eine umfassende @font-face-Deklaration verwendet werden, die auf unterschiedliche Browseranforderungen zugeschnitten ist . Die folgende browserübergreifende Deklaration stellt die Kompatibilität mit Chrome und Firefox sicher:

@font-face {
  font-family: 'Font Name';
  src: url('FontName.eot');
  src: local('☺'),
         url('FontName.woff') format('woff'), url('FontName.ttf') format('truetype');
}

Die .eot-Datei ist für Internet Explorer bestimmt, während andere Browser entweder .woff- oder .ttf-Formate verwenden. Um diese verschiedenen Formate aus Ihrer Quellschriftart zu generieren, sollten Sie den Font-Face-Generator von Font Squirrel nutzen.

Zusätzlich sollte eine .htaccess-Datei konfiguriert werden, um die relevanten MIME-Typen für die Schriftartendateien anzugeben:

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

Durch Befolgen dieser Empfehlungen können Sie sicherstellen, dass Ihre benutzerdefinierte Schriftart in verschiedenen Browsern, einschließlich Chrome, ordnungsgemäß angezeigt wird.