O Firefox não pode renderizar ícones do conjunto de fontes Font Awesome

No Firefox (Windows 7), os ícones e glifos chamados do pacote Font Awesome não são renderizados 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.

Como aparece no Chrome (Windows 7), Safari (Mac OS X) e Inox (Mac OS X):

Encontrei essa pergunta no Stack Overflow que pode explicar por que isso acontece - o CSS usa aspas simples para incluir a localização src da fonte. No entanto, não tenho acesso de gravação aos servidores da Khan Academy, portanto não posso modificar o site real. Quero saber se isso pode ser corrigido no Firefox e como. Posso executar scripts Greasemonkey se isso ajudar. Eu já tentei baixar manualmente a fonte e adicioná-la à pasta Fontes do Windows, mas isso não ajuda.

Para referência, o CSS que configura essa 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: Eu 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 os dois códigos são exatamente os mesmos, exceto que não há ponto e vírgula após o último atributo do CSS da KA (se você ignorar o fato de que ele está compactado). A falta de ponto e vírgula causa esse problema?

O problema descrito na pergunta foi corrigido pela Khan Academy alterando todos os caminhos de ./para /fonts/(por exemplo, ./fontawesome-webfont.ttfalterações para /fonts/fontawesome-webfont.ttf). Parece-me que o Firefox não consegue 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 esse problema.

Comentários adicionais:

Sua edição sobre o .prefixo é um problema do servidor, não como o Firefox lida com arquivos. KA estavam referenciando os arquivos de fonte do local errado - aleatoriamente

Incorreta! 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. Era claramente o problema do Firefox com o ./caminho, como expliquei, o que forçou o KA a mover os arquivos de fonte para um novo local que não precisava ./, permitindo que o Firefox também lesse os arquivos de fonte corretamente. Portanto, é uma questão de como o Firefox lida com arquivos.

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

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

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

Fiz as alterações de caminho para executar o IE, Firefox e 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 }