Type MIME incorrect pour @font-face dans Chrome

Lors de la tentative d'implémentation d'une police personnalisée à l'aide de la déclaration @font-face dans Chrome , les développeurs peuvent rencontrer un message d'erreur indiquant « Ressource interprétée comme police mais transférée avec une application/un flux d'octets de type MIME. » Ce problème provient d'une inadéquation entre le type MIME du fichier de police et le type attendu spécifié dans la déclaration.

Pour résoudre cet écart, une déclaration @font-face complète peut être utilisée pour répondre aux différentes exigences du navigateur. . La déclaration multi-navigateurs suivante garantit la compatibilité avec Chrome et Firefox :

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

Le fichier .eot est conçu pour Internet Explorer, tandis que d'autres navigateurs utilisent les formats .woff ou .ttf. Pour générer ces différents formats à partir de votre police source, envisagez d'utiliser le générateur de polices de caractères de Font Squirrel.

De plus, un fichier .htaccess doit être configuré pour spécifier les types MIME pertinents pour les fichiers de police :

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

En suivant ces recommandations, vous pouvez vous assurer que votre police personnalisée s'affiche correctement dans différents navigateurs, y compris Chrome.