Por que o @ font-face está jogando um erro 404 nos arquivos woff?

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

Além disso, usei a ferramenta fontsquirrels para criar as @font-face e 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 experimentando esse mesmo sintoma – 404 em arquivos woff no Chrome – e estava executando um aplicativo em um servidor Windows com o IIS 6.

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

    Solução 1

    “Basta adicionar as seguintes declarações de tipo MIME por meio do Gerenciador do IIS (guia Cabeçalhos HTTP das propriedades do site): .woff application / x-woff

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

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

    Tipos MIME do IIS 6

    Graças 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 :

             

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

    Se você conseguir isso, você pode mudar de

    aplicação / x-woff

    para

    aplicativo / x -font -woff

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

    (testado no Chrome 17)

    A resposta para este post foi muito útil e uma grande economia de tempo. No entanto, descobri que ao usar o FontAwesome 4.50 , eu tive que adicionar uma configuração adicional para o tipo de extensão woff2 como mostrado abaixo. As solicitações para o tipo woff2 estavam dando um erro 404 nas Ferramentas de Desenvolvedor do Chrome em Console> Erros.

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

             

    Solução para o IIS7

    Eu também me deparei com o mesmo problema. Acho que fazer essa configuração no nível do servidor seria melhor, já que 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 de MIME”

    2. Clique no link “Adicionar” no painel “Ações” no canto superior direito.

    3. Isso trará um diálogo. Inclua 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

    Ir para tipos MIME

    Adicionar tipo MIME

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

    Execute o IIS Server Manager (execute o comando: inetmgr) Abra os Tipos Mime e adicione os seguintes

    Extensão do nome de arquivo: .woff

    Tipo MIME : application / octet-stream

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

                      

    Eu tentei uma tonelada de coisas em torno de permissions, tipos mime, etc, mas para mim acabou sendo que o web.config tinha removido o manipulador de arquivos estáticos no IIS e, em seguida, explicitamente adicionado de volta para diretórios que teriam arquivos estáticos. Assim que adicionei um nó de localização para o meu diretório e adicionei o manipulador de volta, as solicitações pararam de receber 404s.

    Se você estiver usando o CodeIgniter no IIS7:

    No seu arquivo web.config, inclua woff no padrão

            

    Espero que ajude !

    Resolvi-o:

    Eu tive que usar o método Mo’Bulletproofer

    Isso pode ser óbvio, mas ele me enganou várias vezes com o 404s … Verifique se as permissions da pasta de fonts estão definidas corretamente.

    Além disso, verifique o seu gravador de URL. Pode jogar 404 se algo “estranho” foi encontrado.

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

    Se ainda não funcionar depois de adicionar tipos MIME, verifique se “Autenticação anônima” está habilitado na seção Autenticação no site e certifique-se de selecionar “Identidade do pool de aplicativos” de acordo com a captura de canvas especificada.

    insira a descrição da imagem aqui

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