Tipo MIME incorrecto para @font-face en Chrome

Al intentar implementar una fuente personalizada usando la declaración @font-face en Chrome , los desarrolladores pueden encontrar un mensaje de error que indica "Recurso interpretado como fuente pero transferido con aplicación de tipo MIME/flujo de octeto". Este problema se debe a una falta de coincidencia entre el tipo MIME del archivo de fuente y el tipo esperado especificado en la declaración.

Para resolver esta discrepancia, se puede emplear una declaración @font-face integral que se adapte a los diferentes requisitos del navegador. . La siguiente declaración entre navegadores garantiza la compatibilidad con Chrome y Firefox:

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

El archivo .eot está diseñado para Internet Explorer, mientras que otros navegadores utilizan formatos .woff o .ttf. Para generar estos diferentes formatos a partir de su fuente de origen, considere aprovechar el generador de fuentes de Font Squirrel.

Además, se debe configurar un archivo .htaccess para especificar los tipos MIME relevantes para los archivos de fuentes:

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

Si sigue estas recomendaciones, puede asegurarse de que su fuente personalizada se muestre correctamente en varios navegadores, incluido Chrome.