CSS @ font-face non funziona con Firefox, ma funziona con Chrome e IE

Il codice seguente funziona con Google Chrome beta e IE 7. Tuttavia, Firefox sembra avere un problema con questo. Sospetto che sia un problema di come sono inclusi i miei file CSS, perché so che Firefox non è troppo amichevole sulle importazioni tra domini.

Ma questo è tutto solo HTML statico e non c’è alcuna questione di cross-domain.

Sul mio landing-page.html eseguo un’importazione CSS in questo modo:

 

All’interno del main.css ho altre importazioni in questo modo:

 @import url("reset.css"); @import url("style.css"); @import url("type.css"); 

e all’interno di type.css ho le seguenti dichiarazioni:

 @font-face { font-family: "DroidSerif Regular"; src: url("font/droidserif-regular-webfont.eot"); src: local("DroidSerif Regular"), url("font/droidserif-regular-webfont.woff") format("woff"), url("font/droidserif-regular-webfont.ttf") format("truetype"), url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "DroidSerif Bold"; src: url("font/droidserif-bold-webfont.eot"); src: local("DroidSerif Bold"), url("font/droidserif-bold-webfont.woff") format("woff"), url("font/droidserif-bold-webfont.ttf") format("truetype"), url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg"); font-weight: normal; font-style: normal; } body { font-family: "DroidSerif Regular", serif; } h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; } 

Ho una directory chiamata “font” nella stessa posizione di type.css. Questa directory di font contiene tutti i file woff / ttf / svg ecc.

Sono perplesso su questo. Funziona su Chrome e IE ma non su Firefox . Com’è ansible? Cosa mi manca?

ESEGUIRE LOCALMENTE IL SITO ( file:/// )

Firefox ha una politica molto rigida di “file uri origin” ( file:/// ) per impostazione predefinita: per far sì che si comporti come tutti gli altri browser, vai su about:config , filtra per fileuri e fileuri la seguente preferenza:

security.fileuri.strict_origin_policy

Impostalo su false e dovresti essere in grado di caricare risorse di font locali su diversi livelli di percorso.

SITO PUBBLICATO

Come per il mio commento qui sotto, e stai riscontrando questo problema dopo aver distribuito il tuo sito, potresti provare ad aggiungere un’intestazione aggiuntiva per vedere se il tuo problema si configura come un problema interdominio: non dovrebbe, dal momento che stai specificando percorsi relativi, ma proverei comunque: nel tuo file .htaccess, specifica di voler inviare un’intestazione aggiuntiva per ogni file .ttf / .otf / .ot in fase di richiesta:

   Header set Access-Control-Allow-Origin "*"   

Francamente, non mi aspetto che faccia alcuna differenza, ma è così semplice che valga la pena provare: altrimenti prova a usare la codifica base64 per il tuo carattere tipografico, brutto ma potrebbe anche funzionare.

Un bel riassunto è disponibile qui

Oltre ad aggiungere quanto segue al tuo .htaccess: (grazie a @Manuel)

   Header set Access-Control-Allow-Origin "*"   

Potresti provare ad aggiungere in modo esplicito i tipi di mime di webfont al file .htaccess … in questo modo:

 AddType font/ttf .ttf AddType font/eot .eot AddType font/otf .otf AddType font/woff .woff 

Alla fine, il mio file .htaccess ha questo aspetto (per la sezione che consente ai caratteri Web di funzionare in tutti i browser)

 # BEGIN REQUIRED FOR WEBFONTS AddType font/ttf .ttf AddType font/eot .eot AddType font/otf .otf AddType font/woff .woff   Header set Access-Control-Allow-Origin "*"   # END REQUIRED FOR WEBFONTS 

Ho avuto anche questo problema. Ho trovato la risposta qui: http://www.dynamicdrive.com/forums/showthread.php?t=63628

Questo è un esempio della soluzione che funziona su firefox, devi aggiungere questa linea al tuo font face css:

 src: local(font name), url("font_name.ttf"); 

Ho avuto esattamente lo stesso problema. Ho dovuto creare una nuova cartella chiamata “font” e inserirla in wp_content. Posso accedervi dal mio browser come questo http://www.example.com/wp-content/fonts/CANDY.otf

In precedenza, la cartella dei caratteri si trovava nella stessa directory del mio file CSS e il carattere @ font-face era simile al seguente:

 @font-face { font-family: CANDY; src: url("fonts/CANDY.otf"); } 

Come ho già detto, questo non funzionava con Firefox ma solo con Chrome. Ora funziona perché ho usato un percorso assoluto:

 @font-face { font-family: CANDY; src: url("http://www.example.com/wp-content/fonts/CANDY.otf"); } 

Lascerò questo qui perché il mio collega ha trovato una soluzione per un problema relativo a “font-face non funziona su Firefox ma ovunque altrove”.

Il problema era solo che Firefox si scombussolava con la dichiarazione della famiglia dei font, questo ha finito per sistemarlo:

 body{ font-family:"MyFont" !important; } 

PS: stavo anche usando html5boilerplate.

Vorrei ricordare che alcuni font hanno problemi in firefox se il loro nome file contiene caratteri specifici. Recentemente ho riscontrato un problema con il font “Modulus” che aveva un nome di file “237D7B_0_0”. Rimuovendo i caratteri di sottolineatura nel nome file e aggiornando il css in modo che corrispondesse al nuovo nome file risolto questo problema. Altri font con personaggi simili non hanno questo problema che è molto curioso … probabilmente un bug in firefox. Consiglierei di mantenere i nomi dei file solo per i caratteri alfanumerici.

Avevo lo stesso problema. Controlla il tuo codice per H1, H2 o qualsiasi altro tipo di targeting con la regola @ font-face. Ho scoperto che mi mancava un coma dopo font-family: 'custom-font-family' Arial, Helvetica etc Si stava rivelando eccellente in tutti i browser, tranne Firefox. Ho aggiunto il coma e ha funzionato.

In particolare per questo tipo di carattere dovresti utilizzare l’API di Google Font:

http://code.google.com/webfonts/family?family=Droid+Sans

Se si desidera ancora utilizzare il generatore di kit di FontSquirrel, utilizzare l’opzione Smiley hack per eliminare i problemi di carattere locale. Dopo aver generato un kit, controlla che il demo.html generato funzioni in FireFox. Scommetto che lo fa. Ora caricalo sul tuo server – scommetto che funziona anche da quando FontSquirrel è fantastico.

Tuttavia, se si rompe il codice del kit generato mentre lo si integra nel progetto, utilizzare i metodi standard di debugging: controllare 404 e andare riga per riga fino a trovare il problema. WOFF dovrebbe sicuramente funzionare in FF, quindi è un buon punto di partenza.

Infine, se non funziona, aggiorna FireFox. Ho scritto tutto questo assumendo che tu stia usando l’ultima; ma non hai specificato quale versione stai verificando, quindi potrebbe essere il tuo problema.

Prova a nerfare la dichiarazione del sorgente locale nelle direttive @font-face .

C’è un bug noto in Firefox o nell’API font di Google che impedisce l’uso delle varianti dei caratteri se il font è installato localmente e corrisponde al nome locale definito:

http://code.google.com/p/googlefontdirectory/issues/detail?id=13

Per identificare efficacemente la dichiarazione locale, basta rendere la stringa di origine locale un po ‘assurda. La convenzione generalmente accettata per questo è usare un carattere unicode smiley ( "☺" ). Perché? Paul Irish ha una grande spiegazione sul suo blog:

http://paulirish.com/2010/font-face-gotchas/#smiley

Ho avuto esattamente questo problema con ff4 su un Mac. Ho avuto un server di sviluppo locale in esecuzione e la mia dichiarazione @ font-face ha funzionato bene. Ho migrato per vivere e FF avrebbe ‘flash’ il tipo corretto sul caricamento della prima pagina, ma quando si navigava più in profondità il carattere tipografico veniva automaticamente impostato sul foglio di stile del browser.

Ho trovato che la soluzione consisteva nell’aggiungere la seguente dichiarazione a .htaccess

   Header set Access-Control-Allow-Origin "*"   

trovato via

Una soluzione semplice che nessuno ha ancora menzionato è incorporare il font direttamente nel file css usando la codifica base64.

Se stai usando fontsquirrel.com, nel generatore di font-face scegliere la modalità esperto , scorrere verso il basso e selezionare Base64 Encode in Opzioni CSS : il Font-Kit scaricato sarà pronto per essere collegato e riprodotto.

Questo ha anche il vantaggio marginale di ridurre il tempo di caricamento della pagina perché richiede una richiesta HTTP in meno.

Lo stai testando nei file locali o fuori da un server Web? I file in directory diverse sono considerati domini diversi per le regole interdominio, quindi se stai eseguendo il test localmente potresti subire delle restrizioni tra domini.

In caso contrario, sarebbe probabilmente utile puntare a un URL in cui si verifica il problema.

Inoltre, suggerirei di consultare la console degli errori di Firefox per vedere se vengono segnalati errori di syntax CSS o altri errori.

Inoltre, vorrei notare che probabilmente vuoi il peso del font: grassetto nella seconda regola @ font-face.

Utilizzo di un controllo di accesso .htaccess La regola di origine non ha funzionato per me quando mi sono trovato di fronte a questo problema.

Invece, in IIS nel web.config inserire il blocco system.webServer mostrato di seguito.

           

Questo ha funzionato come un fascino per me. Se è necessario limitare l’accesso a determinati domini, sostituire * con il dominio.

Stavo avendo lo stesso problema nel mostrare correttamente un font in Firefox. Ecco cosa ho trovato che funziona per me. Aggiungi una barra prima della directory che contiene il carattere nell’attributo url. Ecco le mie versioni precedenti e successive:

 BEFORE: @font-face { font-family: "GrilledCheese BTN"; src: url(fonts/grilcb__.ttf); } AFTER: @font-face { font-family: "GrilledCheese BTN"; src: url(/fonts/grilcb__.ttf); } 

notare la barra iniziale prima di “caratteri” nell’URL? Ciò indica al browser di avviarsi nella directory principale e quindi accedere alla risorsa. Almeno per me – Problema risolto.

Puoi controllare con Firebug se ne hai 404? Ho avuto problemi nel passaggio e ho trovato che l’estensione era la stessa, ma linux file.ttf è diverso da file.TTF … e ha funzionato con tutti i browser tranne Firefox.

Vorrei che aiuti!

Questo è un problema con il modo in cui hai impostato i percorsi del tuo font-face. Poiché non hai avviato il percorso con una “/”, Firefox tenterà di trovare il carattere in base al percorso in cui si trova il foglio di stile. Fondamentalmente, Firefox sta cercando il tuo font nella directory “root / css / font” invece di la directory “root / font”. Puoi facilmente risolvere questo problema spostando la cartella dei font nella cartella css o aggiungendo / all’inizio dei percorsi dei font.

Prova questo:

 @font-face { font-family: "DroidSerif Regular"; src: url("/font/droidserif-regular-webfont.eot"); src: local("DroidSerif Regular"), url("/font/droidserif-regular-webfont.woff") format("woff"), url("/font/droidserif-regular-webfont.ttf") format("truetype"), url("/font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "DroidSerif Bold"; src: url("/font/droidserif-bold-webfont.eot"); src: local("DroidSerif Bold"), url("/font/droidserif-bold-webfont.woff") format("woff"), url("/font/droidserif-bold-webfont.ttf") format("truetype"), url("/font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg"); font-weight: normal; font-style: normal; } body { font-family: "DroidSerif Regular" , serif; } h1 { font-weight: bold; font-family: "DroidSerif Bold"; } 

Ho avuto un problema simile. La pagina dimostrativa di fontsquirel funzionava in FF ma non nella mia pagina, anche se tutti i file provenivano dallo stesso dominio!

Ho scoperto che stavo collegando il mio foglio di stile con un URL assoluto (http://example.com/style.css), quindi FF pensava che provenisse da un dominio diverso. Cambiare il mio link del foglio di stile href su /style.css ha invece corretto le cose per me.

Forse il tuo problema è un problema di denominazione, in particolare per quanto riguarda l’uso (o meno) di spazi e trattini.

Stavo avendo un problema simile, che pensavo di aver corretto inserendo le virgolette opzionali (‘) attorno ai nomi di font / famiglia, ma che in realtà implicitamente risolvevano un problema di denominazione.

Non sono completamente aggiornato sulle specifiche CSS, e c’è (a mio parere) alcune ambiguità sul modo in cui i clienti interpretano le specifiche. Inoltre, sembra anche correlato alle convenzioni di denominazione PostScript, ma per favore correggimi se sbaglio!

Comunque, come ho capito ora, la tua dichiarazione sta usando una miscela di due possibili sapori distinti.

 @font-face { font-family: "DroidSerif Regular"; 

Se consideri Droid come il vero nome di famiglia, di cui Sans e Serif sono membri, proprio come per esempio i loro figli Sans Regular o Serif Bold , allora usi gli spazi per concatinare gli identificatori, oppure rimuovi gli spazi e usa CamelCasing per the familyName e trattini per sub-identificatori.

Applicato alla tua dichiarazione, sarebbe simile a questo:

 @font-face { font-family: "Droid Serif Regular"; 

O

 @font-face { font-family: DroidSerif-Regular; 

Penso che entrambi dovrebbero essere perfettamente legali, con o senza le virgolette, ma ho avuto un successo misto con quello tra vari clienti. Forse, un giorno, ho un po ‘di tempo per capire i dettagli di questo / questi isseu / s.

Ho trovato questo articolo utile per comprendere alcuni degli aspetti coinvolti: http://mathiasbynens.be/notes/unquoted-font-family

Questo articolo contiene ulteriori dettagli su PostScript e alcuni collegamenti a un PDF di specifiche Adobe: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/

Non c’è bisogno di scherzare con le impostazioni basta rimuovere le virgolette e gli spazi dalla famiglia di font:

Questo

 body {font-family: "DroidSerif Regular", serif; } 

diventa questo

 body {font-family: DroidSerifRegular, serif; } 

Nel mio caso, ho risolto il problema con l’inserimento del codice di stile font-face

  

inserisci l’intestazione nella tua pagina index.html o php, nel tag style. Per me va bene!

Per questo motivo questo è uno dei migliori risultati di Google per questo problema Vorrei aggiungere quello che ha risolto questo problema per me:

Ho dovuto rimuovere il formato (opentype) dal src del font-face, poi ha funzionato anche in Firefox. Prima ha funzionato bene in Chrome e Safari.

Potrebbe non essere dovuto al tuo codice, è dovuto alla tua configurazione di Firefox.

Provalo dalla Tool bar da occidentale a Unicode

 View > Text Encoding > Unicode 

Se stai cercando di importare font esterni, devi affrontare uno dei problemi più comuni con Firefox e altri browser. Qualche volta il tuo font funziona bene su google Chrome o su uno degli altri browser ma non su tutti i browser.

Ci sono molte ragioni per questo tipo di errore uno dei principali motivi dietro questo problema è il precedente carattere per-definito. È necessario aggiungere! Parola chiave importante dopo la fine di ogni riga di codice CSS come di seguito:

Esempio:

 @font-face { font-family:"Hacen Saudi Arabia" !important; src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important; src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important; src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important; src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important; } .sample { font-family:"Hacen Saudi Arabia" !important; } 

Descrizione: inserisci qui sopra il codice nel tuo file CSS o codice. Nell’esempio precedente sostituisci “Hacen Arabia Saudita” con la tua famiglia di font e sostituisci l’url come nella directory dei tuoi font.

Se si inserisce! Importante nel proprio browser di codice CSS, si concentra automaticamente su questa sezione e sostituisce la proprietà precedentemente utilizzata. Per maggiori dettagli visita: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

Ho avuto lo stesso problema e l’ho risolto aggiungendo meta per il contenuto:

   

Questo succede in Firefox e Edge se hai testi Unicode nel tuo html.

Non so come è stata creata la syntax poiché ho usato svg nella dichiarazione dei font, ma Font Squirel ha uno strumento veramente buono per creare un font-face syntax a prova di proiettile da un solo font.

http://www.fontsquirrel.com/fontface/generator

Potrebbe anche essere l’uso dell’URL nel percorso del tag font-face. Se si utilizza “http://dominio.com” non funziona in Firefox, per me la modifica in “http://www.dominio.com” ha funzionato.

Il mio problema era che Windows ha chiamato il font ‘font.TTF’ e firefox atteso ‘font.ttf’ ho visto che dopo aver aperto il mio progetto in linux, rinominato il font per propper name e tutto funziona