Por que @ font-face está lançando um erro 404 em arquivos woff?


422

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;
}

qual versão você tem para o firefox e o chrome? Gecko 1.9.2 (Firefox 3.6) adiciona suporte para WOFF.
Sotiris

Tente converter no OTF em Woff novamente. Eu tive um problema semelhante e a análise do arquivo estava corrompida. Este é um bom site para converter em diferentes tipos de fonte. onlinefontconverter.com
stacksonstacksonstacks

Respostas:


722

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.

Tipos de MIME do IIS 6

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>

5
Observe que você pode receber um erro Cannot add duplicate collection entry of type ‘mimeMap’ with unique key attribute ‘fileExtension’...devido a um conflito com o arquivo applicationhost.config. Você pode corrigir isso adicionando <remove fileExtension=".woff" />um pouco antes de especificar o novo mimeMap no seu arquivo web.config, para remover a duplicata falsa.
Pete

11
O tipo MIME foi padronizado como application/font-woff.
Fernando Correia

5
Isso fez o truque! Se você tem o mesmo problema, mas com .woff2 arquivo basta adicionar outro tipo MIME (ou config) com essa extensão
mapache

2
Parece que a especificação mudou (novamente). Seu conselho para application/x-font-woffagora está desatualizado, a partir da RFC 8081 o tipo correto de mímica é agora font/woffe font/woff2. Veja a resposta atualizada na sua pergunta vinculada
Liam

3
Esta solução não funcionou para mim. O que fez o truque para mim foi: hotcakescommerce.zendesk.com/hc/pt-br/articles/… #
Kim Lage

53

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>

3
e sua tag mencionado <staticContent>deve estar dentro de uma <system.webServer>tag
S.Serpooshan

funcionando perfeitamente bem, relatórios do Windows Server 2012 r2, ASP.Net MVC5.
Cromwell

44

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)


Onde você muda isso? No navegador ou no servidor?
Jake Wilson

Como explicado na resposta acima, ele deve ser o servidor. Esta solução é para o Windows Server com o IIS 6.
adriendenat

1
Chrome ainda está reclamando para mim com x-font-woff
o Sonic Alma

Para reiterar meu comentário : Parece que a especificação mudou (novamente). Seu conselho para application/x-font-woffagora está desatualizado, a partir da RFC 8081 o tipo correto de mímica é agora font/woffe font/woff2. Veja a resposta atualizada na sua pergunta vinculada
Liam

15

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

Vá para tipos MIME

Adicionar tipo MIME

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


2
Observe que as respostas somente de link são desencorajadas ; as respostas SO devem ser o ponto final de uma pesquisa por uma solução (em comparação com outra parada de referências, que tendem a ficar obsoletas ao longo do tempo). Considere adicionar aqui uma sinopse independente, mantendo o link como referência.
kleopatra

@kleopatra - Atualizou a resposta com detalhes e removeu o link.
Dhanuka777

"Acho que fazer essa configuração no nível do servidor seria melhor, pois se aplica a todos os sites". - bem, isso realmente depende. Se você está lidando com um servidor corporativo, que possivelmente executa vários aplicativos internos, sim, você está certo. Por outro lado, se você executa um site público, distribuído em vários servidores, o método web.config vence em termos de "consistência" (ou seja, ele estará lá, não se esqueça de configurá-lo em um servidor).
Balázs

10

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>

8

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


1

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.


1

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 !


0

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.


0

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


0

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.


0

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.

insira a descrição da imagem aqui



-1

Resolvi-o:

Eu tive que usar o método Mo'Bulletproofer


Isso significa que você não está mais usando o WOFF? Será que o seu servidor da Web não está configurado corretamente para servir arquivos WOFF? Por exemplo, veja isto: stackoverflow.com/questions/3594823/mime-type-for-woff-fonts/…
mercator

Testei a fonte com a codificação com outras máquinas. Exibe multa e nenhum erro 404.
dcp3450

Isso não me deixa. A codificação é muito longa. É explicado aqui: paulirish.com/2010/font-face-gotchas
dcp3450

1
O link na resposta não existe mais.
Munim Munna
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.