Firefox non può eseguire il rendering delle icone dal set di Font Awesome webfont

In Firefox (Windows 7), le icone e gli glifi che vengono chiamati dal pacchetto Font Awesome non vengono visualizzati correttamente. Un esempio di questo può essere visto sul sito web della Khan Academy. Sotto il video le icone sono mostrate come caselle con codici esadecimali. Ciò significa che non viene scaricato da Firefox.

Come appare su Chrome (Windows 7), Safari (Mac OS X) e Stainless (Mac OS X):

Ho trovato questa domanda su Stack Overflow che potrebbe spiegare perché ciò accada: il CSS usa virgolette singole per racchiudere la posizione src del font. Tuttavia, non ho alcun accesso in scrittura ai server di Khan Academy, quindi non posso modificare il sito Web effettivo. Voglio sapere se questo può essere risolto in Firefox e come. Posso eseguire gli script Greasemonkey se ciò potrebbe aiutare. Ho già provato a scaricare manualmente il font e ad aggiungerlo alla cartella Fonts di Windows, ma questo non aiuta.

Per riferimento, il CSS che imposta questo carattere (non elaborato correttamente da 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
}

Aggiornamento: ho scoperto che Firefox visualizza correttamente le icone basate sui caratteri nel sito Web del pacchetto Font Awesome (linkato sopra). Dopo l'ispezione del CSS e il confronto con il CSS di Khan Academy, trovo che entrambi i codici siano esattamente gli stessi tranne che non c'è un punto e virgola dopo l'ultimo attributo per il CSS di KA (se ignori il fatto che è compresso). La mancanza del punto e virgola causa questo problema?

Il problema descritto nella domanda è stato risolto dalla Khan Academy modificando tutti i percorsi da ./a /fonts/(ad esempio, ./fontawesome-webfont.ttfmodifiche a /fonts/fontawesome-webfont.ttf). Mi sembra che Firefox non sia in grado di leggere i file dalla speciale directory "punto" (che si riferisce semplicemente alla directory corrente).

PS: la mancanza di punto e virgola nel CSS dopo l'ultimo attributo non causa questo problema.

Commenti aggiuntivi:

La modifica del .prefisso è un problema del server, non come Firefox gestisce i file. KA faceva riferimento ai file dei caratteri da una posizione errata, a caso

! non corretta I caratteri hanno funzionato correttamente in altri tre browser come avevo già menzionato nella domanda molto tempo fa, il che significa che i caratteri erano nella posizione corretta. È stato chiaramente il problema di Firefox con il ./percorso, come ho spiegato, che ha costretto KA a spostare i file dei caratteri in una nuova posizione che non è necessaria ./, consentendo a Firefox di leggere correttamente i file dei caratteri. Pertanto è un problema di come Firefox gestisce i file.

Probabilmente non è la risposta alla domanda posta, ma abbastanza correlata da aiutare le persone che finiscono qui con un problema leggermente diverso che produce lo stesso risultato mostrato nelle schermate.

Firefox blocca l'uso di un font che si trova su un (sotto-) dominio diverso

Leggi anche i commenti su questi post, danno buoni consigli.

Ho fatto le modifiche del percorso per eseguire IE, Firefox e Chrome correttamente, come segue: ( URL per vedere )

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