O Firefox não pode renderizar ícones do Font Awesome webfont set

Question

No Firefox (Windows 7), ícones e glifos são chamados da não é renderizado corretamente. Um exemplo disso pode ser visto no site da Khan Academy. Abaixo do vídeo, os ícones são mostrados como caixas com códigos hexadecimais. Isso significa que não está sendo baixado pelo Firefox.

ComoaparecenoChrome(Windows7),Safari(MacOSX)eInox(MacOSX):

Eu encontrei esta pergunta em Estouro de pilha que pode explicar por que isso acontece - o CSS usa aspas simples para delimitar a localização src da fonte. No entanto, não tenho acesso de gravação aos servidores da Khan Academy, por isso não posso modificar o site real. Eu quero saber se isso pode ser corrigido no Firefox e como. Eu posso rodar scripts do Greasemonkey se isso ajudar. Eu já tentei baixar manualmente a fonte e adicioná-la à pasta Fonts do Windows, mas isso não ajuda.

Para referência, o CSS que define esta fonte (não processada corretamente pelo Firefox) é:

@font-face
{
  font-family:'FontAwesome';
  src:url('./fontawesome-webfont.eot');
  src:url('./fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
      url('./fontawesome-webfont.woff') format('woff'),
      url('./fontawesome-webfont.ttf') format('truetype'),
      url('./fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight:normal;
  font-style:normal
}

[class^="icon-"]:before,
[class*=" icon-"]:before
{
  font-family:FontAwesome;
  font-weight:normal;
  font-style:normal;
  display:inline-block;
  text-decoration:inherit
}

Atualização: descobri que o Firefox exibe corretamente os ícones baseados em fontes no site do pacote Font Awesome (link acima). Após a inspeção do CSS e a comparação com o CSS da Khan Academy, acho que ambos os códigos são exatamente os mesmos exceto não há ponto e vírgula após o último atributo do CSS do KA (se você ignorar o fato de estar compactado). A falta de ponto-e-vírgula causa esse problema?

    

Answer 1

O problema descrito na questão foi corrigido pela Khan Academy, alterando todos os caminhos de ./ para /fonts/ (por exemplo ./fontawesome-webfont.ttf changes para /fonts/fontawesome-webfont.ttf ). Parece-me que o Firefox é incapaz de ler arquivos do diretório "ponto" especial (que simplesmente se refere ao diretório atual).

PS: A falta de ponto-e-vírgula no CSS após o último atributo não causa este problema.

Comentários adicionais:

Your edit about the . prefix is a server issue, not how Firefox handles files. KA were referencing the font files from the wrong location – random

Incorreto! As fontes funcionaram corretamente em três outros navegadores, como eu já havia mencionado em questão há muito tempo, o que significa que as fontes estavam no local correto. Claramente, o problema do Firefox com o caminho ./ , como expliquei, forçou a KA a mover os arquivos de fontes para um novo local que não precisa de ./ , permitindo que o Firefox leia os arquivos de fontes corretamente. Portanto, é uma questão de como o Firefox lida com arquivos.

    

Answer 2

Provavelmente não a resposta à pergunta colocada, mas relacionada o suficiente para ajudar as pessoas que acabam aqui com um problema ligeiramente diferente que produz o mesmo resultado mostrado nas capturas de tela.

Firefox bloqueando o uso de uma fonte que está ativada um (sub) domínio diferente

Leia também os comentários sobre essas postagens, eles dão bons conselhos.

    

Answer 3

Eu fiz as alterações no caminho para executar o IE, o Firefox e o Chrome corretamente, da seguinte maneira: ( URL para ver )

@font-face{
  font-family:'FontAwesome';
  src:url('ogi/bete/font/fontawesome-webfont.eot?v=3.0.1');
  src:url('/ogi/bete/font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), 
  url('/ogi/bete/font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
  url('ogi/bete/font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight:normal;
  font-style:normal }