font-face con el tipo MIME incorrecto en Chrome

Esta es la statement @font-face que he usado:

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

Esto funciona perfectamente en Firefox pero no en Chrome. Después de “inspeccionar el elemento” recibí el siguiente mensaje:

Recurso interpretado como fuente pero transferido con el tipo MIME application / octet-stream.

Cualquier sugerencia será apreciada.

Como de costumbre, diferentes navegadores tienen diferentes necesidades. Aquí hay una statement de navegador @fontface, tomada del blog Paul Irish –

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

.eu es para IE, el rest de los navegadores usan .woff o .ttf. Si necesita generar los diferentes tipos de la fuente fuente, puede usar el generador de cara de fuente de Font Squirrel

También necesita un .htaccess a la ubicación de las fonts agregando los siguientes tipos:

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

Puede ignorar la advertencia y puede considerar esta publicación sobre el tema, Tipo MIME correcto para fonts

Que también menciona lo siguiente:

“Nota: Debido a que no hay tipos MIME definidos para las fonts TrueType, OpenType y WOFF, no se considera el tipo MIME del archivo especificado”.

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

Sus archivos de fonts no se transfieren con el tipo MIME adecuado. Este es un problema de configuración del servidor web que puede solucionarse fácilmente.

Para nginx, combine esto con la configuración de tipos existente, que generalmente se encuentra en el directorio /etc/nginx :

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

Para Apache, agregue estas líneas a .htaccess encuentra en su raíz de documento:

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

Si puede editar un archivo .htaccess, intente agregar

 addType font/ttf .ttf 

de lo contrario, podría usar una fuente svg / svgz en su lugar

Si ejecuta un servidor con nodeJS, este es un buen módulo para mapear sus tipos de mime

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