Estou usando @font-faceno site da minha empresa e funciona / parece ótimo. Exceto Firefox e Chrome lançará um erro 404 no .woffarquivo. O IE não lança o erro. Eu tenho as fontes localizadas na raiz, mas tentei com as fontes na pasta css e até fornecendo o URL inteiro para a fonte. Se remover essas fontes do meu arquivo css, não recebo o 404, então sei que não é um erro de sintaxe.

Além disso, usei a ferramenta fontsquirrels para criar as @font-facefontes e o código:

@font-face {
  font-family: 'LaurenCBrownRegular';
  src: url('/laurencb-webfont.eot');
  src: local('☺'), 
    url('/laurencb-webfont.woff') format('woff'), 
    url('/laurencb-webfont.ttf') format('truetype'), 
    url('/laurencb-webfont.svg#webfontaaFhOfws') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FontinSansRegular';
  src: url('/fontin_sans_r_45b-webfont.eot');
  src: local('☺'), 
    url('/fontin_sans_r_45b-webfont.woff') format('woff'), 
    url('/fontin_sans_r_45b-webfont.ttf') format('truetype'), 
    url('/fontin_sans_r_45b-webfont.svg#webfontKJHTwWCi') format('svg');
  font-weight: normal;
  font-style: normal;
}

Eu estava com esse mesmo sintoma - 404 em arquivos woff no Chrome - e estava executando um aplicativo em um Windows Server com IIS 6.

Se você estiver na mesma situação, poderá corrigi-lo fazendo o seguinte:

Solução 1

"Simplesmente adicione as seguintes declarações de tipo MIME através do Gerenciador do IIS (guia HTTP Headers das propriedades do site): .woff application / x-woff "

Atualização: de acordo com os tipos MIME para fontes woff e Grsm, o tipo MIME real é application / x-font-woff (pelo menos para o Chrome). O x-woff corrige o Chrome 404s, o x-font-woff corrige os avisos do Chrome.

A partir de 2017 : as fontes Woff agora foram padronizadas como parte da especificação RFC8081 para o tipo mime font/woffe font/woff2.

Agradecimentos a Seb Duggan: http://sebduggan.com/posts/serving-web-fonts-from-iis

Solução 2

Você também pode adicionar os tipos MIME na configuração da web :

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
    </staticContent>    
  </system.webServer>

A resposta a este post foi muito útil e economizou muito tempo. No entanto, descobri que, ao usar FontAwesome 4.50, precisava adicionar uma configuração adicional para o woff2tipo de extensão, conforme mostrado abaixo, caso contrário, os pedidos de woff2tipo estavam causando um erro 404 nas Ferramentas do desenvolvedor do Chrome, em Console> Erros.

De acordo com o comentário de S.Serp, a configuração abaixo deve ser colocada dentro da <system.webServer>tag.

<staticContent>
  <remove fileExtension=".woff" />
  <!-- In case IIS already has this mime type -->
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  <remove fileExtension=".woff2" />
  <!-- In case IIS already has this mime type -->
  <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />
</staticContent>

Na verdade, a resposta de @Ian Robinson funciona bem, mas o Chrome continuará reclamando com a mensagem: " Recurso interpretado como fonte, mas transferido com o tipo MIME application / x-woff "

Se você conseguir isso, pode mudar de

aplicação / x-woff

para

application / x -font -woff

e você não terá mais nenhum erro do console do Chrome!

(testado no Chrome 17)

Solução para IIS7

Eu também me deparei com o mesmo problema. Eu acho que fazer essa configuração no nível do servidor seria melhor, pois se aplica a todos os sites.

1. Vá para o nó raiz do IIS e clique duas vezes na opção de configuração "Tipos MIME"

2. Clique no link "Adicionar" no painel Ações, no canto superior direito.

3. Isso exibirá um diálogo. Adicione a extensão de arquivo .woff e especifique "application / x-font-woff" como o tipo MIME correspondente.

Adicionar tipo MIME para extensão de nome de arquivo .woff

Aqui está o que eu fiz para resolver o problema no IIS 7

Além da resposta de Ian, eu tive que permitir que as extensões de fonte no módulo de filtragem de solicitações o fizessem funcionar.

<system.webServer>
  <staticContent>
    <remove fileExtension=".woff" />
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
  </staticContent>
  <security>
      <requestFiltering>
          <fileExtensions>
              <add fileExtension=".woff" allowed="true" />
              <add fileExtension=".ttf" allowed="true" />
              <add fileExtension=".woff2" allowed="true" />
          </fileExtensions>
      </requestFiltering>
  </security>    
</system.webServer>

Execute o IIS Server Manager (comando de execução: inetmgr) Abra Tipos de MIME e adicione os seguintes

Extensão do nome do arquivo: .woff

Tipo MIME : application / octet-stream

Eu tentei várias coisas em torno de permissões, tipos MIME, etc., mas para mim acabou sendo que o web.config havia removido o manipulador de arquivo estático no IIS e o adicionado explicitamente em diretórios que teriam arquivos estáticos. Assim que adicionei um nó de localização ao meu diretório e adicionei o manipulador de volta, as solicitações pararam de obter 404s.

Se você estiver usando o CodeIgniter no IIS7:

No seu arquivo web.config, adicione woff ao padrão

<rule name="Rewrite CI Index">
  <match url=".*" />
    <conditions>
      <add input="{REQUEST_FILENAME}" pattern="css|js|jpg|jpeg|png|gif|ico|htm|html|woff" negate="true" />
    </conditions>
    <action type="Rewrite" url="index.php/{R:0}" />
 </rule>

Espero que ajude !

Isso pode ser óbvio, mas ele me deixou com 404s várias vezes ... Verifique se as permissões da pasta de fontes estão definidas corretamente.

Verifique também o seu reescritor de URL. Pode lançar 404 se algo "estranho" for encontrado.

Se você não tem acesso à sua configuração de servidor da web, também pode renomear o arquivo da fonte para que ele termine em svg (mas mantenha o formato). Funciona bem para mim no Chrome e Firefox.

Se ainda não funcionar após a adição de tipos MIME, verifique se "Autenticação anônima" está ativada na seção Autenticação do site e selecione "Identidade do pool de aplicativos" conforme a captura de tela fornecida.

Tipo de MIME do IIS: .woff font / x-woff (não application / x-woff ou application / x-font-woff)

Resolvi-o:

Eu tive que usar o método Mo'Bulletproofer