Tipo MIME incorreto para @font-face no Chrome

Ao tentar implementar uma fonte personalizada usando a declaração @font-face no Chrome , os desenvolvedores podem encontrar uma mensagem de erro indicando "Recurso interpretado como fonte, mas transferido com aplicativo do tipo MIME/fluxo de octetos." Esse problema decorre de uma incompatibilidade entre o tipo MIME do arquivo de fonte e o tipo esperado especificado na declaração.

Para resolver essa discrepância, uma declaração @font-face abrangente pode ser empregada, atendendo a diferentes requisitos do navegador. . A seguinte declaração entre navegadores garante compatibilidade com Chrome e Firefox:

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

O arquivo .eot é designado para o Internet Explorer, enquanto outros navegadores utilizam os formatos .woff ou .ttf. Para gerar esses formatos diferentes a partir de sua fonte de origem, considere aproveitar o gerador de face de fonte do Font Squirrel.

Além disso, um arquivo .htaccess deve ser configurado para especificar os tipos MIME relevantes para os arquivos de fonte:

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

Seguindo essas recomendações, você pode garantir que sua fonte personalizada seja exibida corretamente em vários navegadores, incluindo o Chrome.