font-face avec un type MIME incorrect dans Chrome

Question

Voici la déclaration @font-face j'ai utilisée:

 @font-face {
    font-family: SolaimanLipi;
    src: url("font/SolaimanLipi_20-04-07.ttf");
}
 

Cela fonctionne parfaitement dans Firefox mais pas dans Chrome. Après "inspecter l'élément", j'ai reçu le message suivant:

Ressource interprétée comme une police mais transférée avec le type MIME application / octet-stream.

Toute suggestion sera appréciée.

Answer 1

Comme d'habitude, des navigateurs différents ont des besoins différents. Ici est un navigateur croix @fontface déclaration, pris de la Paul Irish blog -

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local(''),
         url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

.eot est pour IE, le reste des navigateurs utiliser .woff ou .ttf Si vous avez besoin de générer les différents types de la police source, vous pouvez utiliser la Police Écureuil font-face generator

Vous avez également besoin d'une .htaccess pour l'emplacement des polices ajouter les types suivants:

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

Answer 2

Vous pouvez ignorer l'avertissement et peuvent vouloir considérer ce post sur le sujet, Bon type MIME pour les polices

Qui mentionne également les éléments suivants:

"Remarque: comme il n'y a pas défini les types MIME pour TrueType, OpenType, et WOFF polices de caractères, le type MIME du fichier spécifié n'est pas prise en compte."

source: http://developer.mozilla.org/en/css/@font-face

Answer 3

Vos fichiers de polices ne sont pas transférés avec le type MIME approprié. Il s'agit d'un problème de configuration du serveur Web qui peut être facilement résolu.

Pour nginx, fusionnez ceci avec les types existants config, généralement présents dans le répertoire /etc/nginx :

 types {
    application/vnd.ms-fontobject    eot;
    application/x-font-woff    woff;
    font/otf    otf;
    font/ttf    ttf;
}
 

Pour Apache, ajoutez ces lignes à .htaccess dans la racine du document:

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

Answer 4

Si vous utilisez un serveur avec nodeJS, c’est un bon module pour mapper vos types mime

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