web-dev-qa-db-fra.com

Avertissement Google: ressource interprétée comme une police mais transférée avec le type MIME application / octet-stream

J'ai un avertissement dans Google pour mon font-face:

Ressource interprétée comme une police mais transférée avec le type MIME application/octet-stream: ".../Content/Fonts/iconFont.ttf".

Cela fonctionne même si j'ai cet avertissement, mais je préfère éviter cet avertissement.

Voici ma déclaration:

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

Je recherche déjà sur d'autres articles mais pas de chance jusqu'à présent.

Veuillez noter que mon serveur est IIS de Microsoft.

Toute idée de comment puis-je éviter cet avertissement?

Merci.

cssfont-face
68
Bronzato

une autre approche sur ici: http://zduck.com/2013/google-chrome-and-woff-font-mime-type-warnings/

utilisez les paramètres ci-dessous sur votre web.config:

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

Vous devez ajouter les types suivants à un fichier .htaccess/IIS:

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

Type de .woff mis à jour depuis:

AddType application/x-font-woff .woff

(Merci à @renadeen dans les commentaires ci-dessous pour l'avoir signalé.)

Découvrez ma réponse à une question similaire ici: Police non chargée

Tiré d'ici: problème de font-face en chrome .

88
97ldave

Merci pour la réponse ci-dessus @ 97ldave, vous pouvez ajouter ces types à votre IIS configuration de serveur Web si vous préférez ne pas les ajouter directement à vos types MIME dans votre IIS configuration. Voici un exemple d’ajout du type .woff manquant dans notre configuration, qui résout les problèmes de polices n’apparaissant pas dans la dernière version de Safari (6.0.3) sur mon iMac.

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

Merci à Jon Samwell (mon collègue) de l’avoir découvert.

46
The Senator

Pour Nginx: (Chemin: /etc/nginx/mime.types)

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

Vous n'avez pas besoin de application/vnd.ms-fontobject eot; parce qu'il existe déjà.

Après cela, redémarrez Nginx: service nginx restart

Terminé.

26
Steven

Les types MIME corrects pour les polices sont les suivants:

application/font-ttf              ttf;
application/font-otf              otf;
application/font-woff             woff;
10
Sven

Si vous utilisez un serveur avec nodeJS, il s’agit d’un module Nice permettant de mapper vos types mime

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'
3
Daan

Merci à @ the-senator et à @ 97ldave pour leurs réponses

pour moi l'erreur disparait complètement après avoir ajouté ces lignes au web.config

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