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

Il seguente codice funziona in 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 gentile con le importazioni tra domini.

Ma questo è tutto solo HTML statico e non c'è questione di domini.

Sul mio landing-page.html faccio un'importazione CSS in questo modo:

<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />

All'interno del main.css ho un'altra importazione 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'è possibile? Cosa mi sto perdendo?

ESECUZIONE LOCALE DEL SITO ( file:///)

Firefox viene fornito con una file:///politica "file uri origin" ( ) molto rigida per impostazione predefinita: per farlo funzionare esattamente come gli altri browser, vai a about:config, filtra per fileurie attiva le seguenti preferenze:

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 da mio commento di seguito, 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 lo proverei comunque: nel tuo file .htaccess, specifica che vuoi inviare un'intestazione aggiuntiva per ogni file .ttf / .otf / .eot richiesto:

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Francamente, non mi aspetto che faccia alcuna differenza, ma è così semplice che vale 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 @Manuel)

<FilesMatch "\.(ttf|otf|eot)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

Puoi provare ad aggiungere esplicitamente i tipi 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 è simile al seguente (per la sezione che consente ai webfonts 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

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

# 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, è necessario aggiungere questa riga al font face css:

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

Lascio questo qui perché il mio collega ha trovato una soluzione per un problema relativo a "font-face che non funziona su Firefox ma ovunque".

Il problema era solo che Firefox ha incasinato la dichiarazione della famiglia di caratteri, questo ha finito per risolverlo:

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

PS: stavo anche usando html5boilerplate.

Avevo lo stesso problema. Ricontrolla il tuo codice per H1, H2 o qualunque stile tu stia prendendo di mira con la regola @ font-face. Ho scoperto che mi mancava un coma dopo che font-family: 'custom-font-family' Arial, Helvetica etcsi presentava bene in tutti i browser tranne Firefox. Ho aggiunto il coma e ha funzionato.

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

In precedenza, la cartella fonts era nella stessa directory del mio file CSS e @ font-face assomigliava a questo:

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

Come ho detto sopra, questo non funzionava in 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");
}

Ho avuto esattamente questo problema con ff4 su un Mac. Avevo un server di sviluppo locale in esecuzione e la mia dichiarazione @ font-face funzionava bene. Sono migrato in diretta e FF avrebbe "mostrato" il tipo corretto al caricamento della prima pagina, ma durante la navigazione più in profondità il carattere tipografico era predefinito sul foglio di stile del browser.

Ho trovato la soluzione nell'aggiungere la seguente dichiarazione a .htaccess

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

trovato via

Una soluzione semplice che nessuno ha ancora menzionato è incorporare il carattere direttamente nel file CSS utilizzando la codifica Base64.

Se stai usando fontsquirrel.com, nel Generatore kit di font-face scegli la modalità esperto , scorri verso il basso e seleziona Base64 Encode in Opzioni CSS : il Font-Kit scaricato sarà pronto per il plug-and-play.

Ciò ha anche il vantaggio secondario di ridurre i tempi di caricamento della pagina perché richiede una richiesta http in meno.

Vorrei menzionare che alcuni caratteri hanno problemi in Firefox se il loro nome file contiene caratteri specifici. Di recente ho riscontrato un problema con il carattere 'Modulo' che aveva un nome file '237D7B_0_0'. La rimozione dei caratteri di sottolineatura nel nome file e l'aggiornamento del CSS per abbinare il nuovo nome file hanno risolto questo problema. Altri caratteri con caratteri 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.

Per questo tipo di carattere, in particolare, dovresti utilizzare l'API dei caratteri di Google:

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

Se vuoi ancora usare il generatore di kit di FontSquirrel, usa l'opzione di hacking Smiley per eliminare i problemi di font locali. Dopo aver generato un kit, verifica che demo.html generato funzioni in FireFox. Scommetto che lo fa. Ora caricalo sul tuo server - Scommetto che funziona anche lì poiché FontSquirrel è fantastico.

Tuttavia, se hai rotto il codice del kit generato mentre lo integravi nel tuo progetto, usa i metodi standard di debug: controlla i 404 e vai riga per riga fino a quando non trovi il problema. WOFF dovrebbe sicuramente funzionare in FF, quindi è un buon punto di partenza.

Infine, se nulla di tutto ciò funziona, aggiorna FireFox. Ho scritto tutto questo supponendo che tu stia usando l'ultima; ma non hai specificato quale versione stai controllando, quindi potrebbe essere anche il tuo problema.

Prova a inserire la dichiarazione della fonte locale nelle tue @font-facedirettive.

Esiste un bug noto in Firefox o nell'API Font di Google che impedisce l'utilizzo delle varianti dei caratteri se il carattere è installato localmente e corrisponde al nome locale definito:

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

Per rendere efficace la dichiarazione locale, basta rendere insensate la stringa di origine locale. La convenzione generalmente accettata per questo è di usare un carattere Unicode smiley ( "☺"). Perché? Paul Irish ha una grande spiegazione nel suo blog:

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

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

Altrimenti, probabilmente sarebbe utile essere indirizzati a un URL in cui si verifica il problema.

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

Inoltre, noterei che probabilmente vuoi il font-weight: grassetto nella seconda regola @ font-face.

L'uso di una regola di controllo dell'accesso .htaccess Consenti Origin non ha funzionato per me quando mi sono trovato di fronte a questo problema.

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

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

Questo ha funzionato come un incanto per me. Se è necessario limitare l'accesso a un determinato dominio, sostituire * con il dominio.

Stavo avendo lo stesso problema nel visualizzare correttamente un font in Firefox. Ecco cosa ho scoperto di lavorare per me. Aggiungi una barra prima della directory che contiene il carattere nell'attributo url. Ecco le mie versioni prima e dopo:

B E F O R E:
   @font-face
{   font-family: "GrilledCheese BTN";
    src: url(fonts/grilcb__.ttf);
}

A F T E R:
@font-face
{   font-family: "GrilledCheese BTN";
    src: url(/fonts/grilcb__.ttf);
}

noti la barra iniziale prima di 'font' nell'URL? Questo dice al browser di iniziare dalla directory principale e quindi accedere alla risorsa. Almeno per me - Problema risolto.

Se stai cercando di importare caratteri esterni, affronti uno dei problemi più comuni con Firefox e altri browser. Qualche volta il tuo font funziona bene su Google Chrome o su un altro browser ma non su tutti i browser.

Esistono molte ragioni per questo tipo di errore, uno dei motivi principali alla base di questo problema è il carattere predefinito precedente. Devi aggiungere! Importante parola chiave 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 caratteri e sostituisci l'URL secondo la tua directory dei caratteri.

Se si immette! Important nel browser del codice CSS, concentrarsi automaticamente su questa sezione e sovrascrivere le proprietà utilizzate in precedenza. Per maggiori dettagli visita: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

Puoi controllare con Firebug se ne ottieni 404? Ho avuto problemi nel passaggio e ho scoperto 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 aiutasse!

Questo è un problema con il modo in cui imposti i percorsi del tuo font-face. Dato che non hai iniziato il percorso con un "/", Firefox tenterà di trovare il carattere in base al percorso in cui si trova il foglio di stile. Quindi, in sostanza, Firefox sta cercando il tuo carattere nella directory "root / css / font" anziché la directory "root / font". Puoi risolverlo facilmente spostando la cartella dei caratteri nella cartella css o aggiungendo un / all'inizio dei percorsi dei tuoi caratteri.

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

Prova questo....

http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/

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

Si è 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. La modifica del mio link del foglio di stile href in /style.css invece ha risolto 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.

Avevo un problema simile, che pensavo di aver risolto posizionando le virgolette facoltative (') attorno ai nomi di font / famiglia, ma che in realtà implicitamente risolto un problema di denominazione.

Non sono completamente aggiornato sulle specifiche CSS e c'è (almeno per me) una certa ambiguità nel modo in cui i diversi clienti interpretano le specifiche. Inoltre, sembra anche correlato alle convenzioni di denominazione PostScript, ma per favore correggimi se sbaglio!

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

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

Se consideri Droid l'effettivo cognome, di cui Sans e Serif sono membri, proprio come ad esempio i loro figli Sans Regular o Serif Bold , allora usi gli spazi ovunque per concatinare gli identificatori, oppure rimuovi gli spazi e usi CamelCasing per familyName e trattini per i sottoidentificativi.

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 su questo / questi isseu / s.

Ho trovato utile questo articolo 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 delle 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 caratteri:

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 stile font-face

<style type="text/css">
@font-face { 
font-family: 'Amazone';font-style: normal; 
/*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/ 
src: local('Amazone'), url(font/Amazone.woff) format('woff');} 
</style>

direttamente nell'intestazione della 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 ciò che ha risolto questo problema per me:

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

Potrebbe non essere a causa del tuo codice, è a causa della tua configurazione di Firefox.

Prova questo da Tool bar Western a Unicode

View > Text Encoding > Unicode

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

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

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

Non so come hai creato la sintassi poiché non ho mai usato svg nella dichiarazione dei caratteri, ma Font Squirel ha davvero un ottimo strumento per creare una sintassi a prova di proiettile da un solo carattere.

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

Potrebbe anche essere l'uso dell'URL nel percorso del tag font-face. Se usi "http://domain.com" non funziona in Firefox, per me cambiarlo in "http://www.domain.com" ha funzionato.

Il mio problema era che Windows chiamava il font 'font.TTF' e che firefox si aspettava 'font.ttf' ho visto che dopo aver aperto il mio progetto in Linux, ho rinominato il font in nome del propper e tutto funziona