it-swarm.com.de

CSS @ font-face funktioniert nicht mit Firefox, sondern mit Chrome und IE

Der folgende Code funktioniert in Google Chrome beta sowie IE= 7. Firefox scheint jedoch ein Problem damit zu haben. Ich vermute, dass dies der Fall ist ein Problem, wie meine CSS-Dateien enthalten sind, weil ich weiß, dass Firefox bei domänenübergreifenden Importen nicht besonders freundlich ist.

Aber das ist alles nur statisches HTML und es ist keine Frage der Cross-Domain.

Auf meiner Landingpage.html importiere ich CSS wie folgt:

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

Innerhalb der main.css habe ich noch einen Import wie diesen:

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

und innerhalb der type.css habe ich folgende deklarationen:

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

Ich habe ein Verzeichnis namens "font" am selben Ort wie type.css. Dieses Font-Verzeichnis enthält alle woff/ttf/svg-Dateien usw.

Ich bin verblüfft. Es funktioniert in Chrome und IE aber nicht in Firefox. Wie ist das möglich? Was fehlt mir?

191
Kaushik Gopal

LOKALES LAUFEN DER WEBSITE (file:///)

Firefox kommt mit einer sehr strengen "Datei uri Origin" (file:///) Standardrichtlinie: Um sich wie andere Browser zu verhalten, gehen Sie zu about:config, filtere nach fileuri und schalte die folgenden Einstellungen um:

security.fileuri.strict_Origin_policy

Setzen Sie es auf false und Sie sollten in der Lage sein, lokale Schriftartressourcen über verschiedene Pfadebenen zu laden.

VERÖFFENTLICHTE WEBSITE

Laut meinem Kommentar unten können Sie versuchen, einen zusätzlichen Header hinzuzufügen, um festzustellen, ob sich Ihr Problem als domänenübergreifendes Problem konfiguriert. Dies sollte nicht der Fall sein, da Sie relative Pfade angeben. Aber ich würde es trotzdem versuchen: Geben Sie in Ihrer .htaccess-Datei an, dass Sie einen zusätzlichen Header für jede angeforderte .ttf/.otf/.eot-Datei senden möchten:

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

Ehrlich gesagt würde ich nicht erwarten, dass es einen Unterschied macht, aber es ist so einfach, dass es sich lohnt, es zu versuchen: Verwenden Sie andernfalls base64 encoding für Ihre Schriftart, hässlich, aber es könnte auch funktionieren.

Eine nette Zusammenfassung ist verfügbar hier

233
Manuel

Zusätzlich zum Hinzufügen des Folgenden zu Ihrem .htaccess: (danke @Manuel)

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

Möglicherweise möchten Sie versuchen, die Webfont-Mime-Typen explizit zur .htaccess-Datei hinzuzufügen.

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

Am Ende sieht meine .htaccess-Datei so aus (für den Abschnitt, in dem Webfonts in allen Browsern funktionieren)

# 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
41
alademann

Ich hatte auch dieses Problem. Ich habe die Antwort hier gefunden: http://www.dynamicdrive.com/forums/showthread.php?t=63628

Dies ist ein Beispiel für die Lösung, die unter Firefox funktioniert. Sie müssen diese Zeile zu Ihrer CSS-Schriftart hinzufügen:

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

Ich hatte genau das gleiche Problem. Ich musste einen neuen Ordner namens "fonts" erstellen und in wp_content ablegen. Ich kann von meinem Browser wie folgt darauf zugreifen http://www.example.com/wp-content/fonts/CANDY.otf

Bisher befand sich der Zeichensatzordner im selben Verzeichnis wie meine CSS-Datei, und das @ font-face sah folgendermaßen aus:

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

Wie ich oben erwähnte, funktionierte dies nicht in Firefox, sondern nur mit Chrome. Jetzt funktioniert es, weil ich einen absoluten Pfad verwendet habe:

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

Ich würde erwähnen, dass einige Schriftarten Probleme in Firefox haben, wenn ihr Dateiname bestimmte Zeichen enthält. Ich habe kürzlich ein Problem mit der Schriftart 'Modulus' mit dem Dateinamen '237D7B_0_0' festgestellt. Das Entfernen der Unterstriche im Dateinamen und das Aktualisieren des CSS, damit es dem neuen Dateinamen entspricht, löste dieses Problem. Andere Schriften mit ähnlichen Zeichen haben dieses Problem nicht, was sehr merkwürdig ist ... wahrscheinlich ein Fehler in Firefox. Ich würde empfehlen, Dateinamen nur aus alphanumerischen Zeichen zu bestehen.

3
niall.campbell

Ich hatte das gleiche Problem. Überprüfen Sie Ihren Code mit der @ font-face-Regel auf H1, H2 oder auf einen anderen Stil, auf den Sie abzielen. Ich habe festgestellt, dass mir nach font-family: 'custom-font-family' Arial, Helvetica etc Ein Koma gefehlt hat. Es wurde in allen Browsern außer Firefox gut angezeigt. Ich habe das Koma hinzugefügt und es hat funktioniert.

3
tarquinwinot

Ich lasse das hier einfach, weil mein Kollege eine Lösung für ein verwandtes Problem gefunden hat, das darin besteht, dass "Schriftarten nicht auf Firefox, sondern überall anders" funktionieren.

Das Problem bestand nur darin, dass Firefox die Deklaration der Schriftfamilie durcheinander brachte. Am Ende wurde dies behoben:

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

PS: Ich habe auch html5boilerplate benutzt.

3
ruyadorno

Eine einfache Lösung, die noch niemand erwähnt hat, ist das direkte Einbetten der Schriftart in die CSS-Datei mithilfe der Base64-Codierung.

Wenn Sie fontsquirrel.com verwenden, wählen Sie im Font-Face-Kit-Generator Expertenmodus, scrollen Sie nach unten und wählen Sie Base64-Codierung unter CSS-Optionen - Das heruntergeladene Font-Kit ist sofort einsatzbereit.

Dies hat auch den Vorteil, dass die Ladezeit der Seite reduziert wird, da eine http-Anforderung weniger erforderlich ist.

2
Pierre

Ich hatte genau dieses Problem mit ff4 auf einem Mac. Ich hatte einen lokalen Entwicklungsserver und meine @ font-face-Deklaration funktionierte einwandfrei. Ich bin zu Live migriert und FF hat beim Laden der ersten Seite den richtigen Typ "geflasht", aber beim tieferen Navigieren wurde standardmäßig die Schriftart des Browser-Stylesheets verwendet.

Ich fand die Lösung darin, die folgende Erklärung zu .htaccess hinzuzufügen

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

gefunden via

2
davus

Insbesondere für diese Schriftart sollten Sie die Google Font-API verwenden:

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

Wenn Sie weiterhin den Kit-Generator von FontSquirrel verwenden möchten, verwenden Sie die Smiley-Hack-Option, um lokale Probleme mit Schriftarten zu beseitigen. Überprüfen Sie nach dem Generieren eines Kits, ob die generierte Datei demo.html in FireFox funktioniert. Ich wette, das tut es. Laden Sie es jetzt auf Ihren Server hoch - ich wette, es funktioniert auch dort, da FontSquirrel fantastisch ist.

Wenn Sie jedoch den generierten Kit-Code während der Integration in Ihr Projekt beschädigt haben, verwenden Sie die Standardmethoden zum Debuggen - suchen Sie nach 404-Werten und gehen Sie Zeile für Zeile, bis Sie das Problem gefunden haben. WOFF sollte auf jeden Fall in FF funktionieren, also ist das ein guter Anfang.

Wenn dies nicht funktioniert, aktualisieren Sie FireFox. Ich habe das alles unter der Annahme geschrieben, dass Sie die neueste Version verwenden. Sie haben jedoch nicht angegeben, welche Version Sie einchecken, sodass dies auch Ihr Problem sein könnte.

2
Casey

Versuchen Sie, die lokale Quelldeklaration in Ihrem @font-face Anweisungen.

Es gibt einen bekannten Fehler in Firefox oder der Google Font-API, der verhindert, dass die Schriftartenvarianten verwendet werden, wenn die Schrift lokal installiert ist, und mit dem definierten lokalen Namen übereinstimmt:

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

Um die lokale Deklaration effektiv zu verfeinern, machen Sie einfach Ihren lokalen Quelltext zu einem Unsinn. Die allgemein akzeptierte Konvention hierfür ist die Verwendung eines Smiley-Unicode-Zeichens ("☺"). Warum? Paul Irish hat eine großartige Erklärung auf seinem Blog:

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

2
jason

Testen Sie dies in lokalen Dateien oder auf einem Webserver? Dateien in verschiedenen Verzeichnissen werden für domänenübergreifende Regeln als unterschiedliche Domänen betrachtet. Wenn Sie also lokal testen, stoßen Sie möglicherweise auf domänenübergreifende Einschränkungen.

Andernfalls wäre es wahrscheinlich hilfreich, auf eine URL zu verweisen, bei der das Problem auftritt.

Außerdem würde ich vorschlagen, die Firefox-Fehlerkonsole zu überprüfen, um festzustellen, ob CSS-Syntaxfehler oder andere Fehler gemeldet werden.

Außerdem möchte ich darauf hinweisen, dass Sie in der zweiten @ font-face-Regel wahrscheinlich die Schriftstärke fett möchten.

1
David Baron

Ich hatte das gleiche Problem damit, dass eine Schriftart in Firefox richtig angezeigt wurde. Folgendes habe ich gefunden, um für mich zu arbeiten. Fügen Sie im url-Attribut einen Schrägstrich vor dem Verzeichnis ein, in dem sich die Schriftart befindet. Hier ist meine vor und nach Versionen:

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

beachten Sie den führenden Schrägstrich vor "Schriftarten" in der URL? Dadurch wird der Browser angewiesen, im Stammverzeichnis zu starten und dann auf die Ressource zuzugreifen. Zumindest für mich - Problem gelöst.

1
WebFixItMan

Die Verwendung einer ".htaccess Access Control Allow Origin" -Regel funktionierte bei mir nicht, als ich mit diesem Problem konfrontiert wurde.

Fügen Sie stattdessen in IIS in der web.config den unten gezeigten system.webServer-Block ein.

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

Das wirkte wie ein Zauber für mich. Wenn Sie den Zugriff auf eine bestimmte Domain einschränken müssen, ersetzen Sie das * durch die Domain.

1
brett

Aus diesem Grund ist dies eines der besten Google-Ergebnisse für dieses Problem. Ich möchte hinzufügen, was dieses Problem für mich gelöst hat:

Ich musste das Format (opentype) vom src der Schriftart entfernen, dann funktionierte es auch in Firefox. Davor hat es in Chrome und Safari gut funktioniert.

0
theva

Sie müssen nicht mit den Einstellungen herumspielen, sondern entfernen nur die Anführungszeichen und Leerzeichen aus der Schriftfamilie:

diese

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

wird dies

body {font-family: DroidSerifRegular, serif; }
0
CR41G14

Kannst du bei Firebug nachsehen, ob du 404 bekommst? Ich hatte Probleme mit dem Pass und fand heraus, dass die Erweiterung dieselbe war, aber linux file.ttf unterscheidet sich von file.TTF ... und es funktionierte mit allen Browsern außer Firefox.

Wünschte, es hilft!

0
ipalaus
0
mgauthier

Möglicherweise ist Ihr Problem ein Namensproblem, insbesondere in Bezug auf die Verwendung (oder Nichtverwendung) von Leerzeichen und Bindestrichen.

Ich hatte ein ähnliches Problem, von dem ich dachte, ich hätte es behoben, indem ich das optionale Anführungszeichen (') um Schrift-/Familiennamen setzte, aber das behebte implizit ein Namensproblem.

Ich bin in Bezug auf die CSS-Spezifikation nicht ganz auf dem neuesten Stand, und es gibt (zumindest für mich) Unklarheiten darüber, wie verschiedene Clients die Spezifikationen interpretieren. Darüber hinaus scheint es auch mit PostScript-Namenskonventionen zu tun zu haben, aber bitte korrigieren Sie mich, wenn ich falsch liege!

So wie ich es jetzt verstehe, verwendet Ihre Deklaration eine Mischung aus zwei möglichen unterschiedlichen Geschmacksrichtungen.

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

Wenn Sie Droid den tatsächlichen Familiennamen berücksichtigen würden, von dem Sans und Serif sind Mitglieder, genau wie zum Beispiel ihre Kinder Sans Regular oder Serif Bold , dann verwenden Sie entweder überall Leerzeichen, um Bezeichner zu verknüpfen, OR = Sie entfernen Leerzeichen und verwenden CamelCasing für den Familiennamen und Bindestriche für Unterkennungen.

Auf Ihre Erklärung angewendet würde es ungefähr so ​​aussehen:

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

OR

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

Ich denke, beide sollten vollkommen legal sein, entweder mit oder ohne Anführungszeichen, aber ich hatte damit gemischten Erfolg zwischen verschiedenen Kunden. Vielleicht habe ich eines Tages etwas Zeit, um die Details zu diesem/diesen isseu/s herauszufinden.

Ich fand diesen Artikel hilfreich, um einige Aspekte zu verstehen: http://mathiasbynens.be/notes/unquoted-font-family

Dieser Artikel enthält einige weitere Details zu PostScript und einige Links zu einer Adobe-PDF-Spezifikation: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/

0
arri

Ich hatte ein ähnliches Problem. Die fontsquirel-Demoseite funktionierte in FF, aber nicht auf meiner eigenen Seite, obwohl alle Dateien von derselben Domain stammten!

Es stellte sich heraus, dass ich mein Stylesheet mit einer absoluten URL (http://example.com/style.css) verknüpfte, sodass FF dachte, es stamme von einer anderen Domain. Durch Ändern meines Stylesheet-Links href zu /style.css wurden die Probleme behoben.

0
SKWebDev

In meinem Fall habe ich das Problem beim Einfügen von Schriftartcode gelöst

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

direkt in der Kopfzeile auf Ihrer index.html oder PHP-Seite, im Style-Tag. Funktioniert bei mir!

0
Aleksandar

Möglicherweise liegt es nicht an Ihrem Code, sondern an Ihrer Firefox-Konfiguration.

Versuchen Sie dies von Tool barWestern bis nicode

View > Text Encoding > Unicode
0
Simplans

Dies ist ein Problem bei der Einrichtung der Pfade Ihrer Schriftart. Da Sie den Pfad nicht mit einem "/" begonnen haben, versucht Firefox, die Schriftarten anhand des Pfads zu finden, in dem sich das Stylesheet befindet. Im Grunde sucht Firefox Ihre Schrift im Verzeichnis "root/css/font" statt nach das "root/font" -Verzeichnis. Sie können dies einfach beheben, indem Sie entweder den Zeichensatzordner in den CSS-Ordner verschieben oder ein/am Anfang Ihrer Zeichensatzpfade einfügen.

Probieren Sie dies aus:

@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";
}
0
rossisdead

Ich hatte das gleiche Problem und löste es, indem ich Meta für den Inhalt hinzufügte:

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

Dies passiert in Firefox und Edge, wenn Sie Unicode-Texte in Ihrem HTML-Code haben.

0
amir mola

Wenn Sie versuchen, externe Schriftarten zu importieren, tritt eines der häufigsten Probleme mit Ihrem Firefox und einem anderen Browser auf. Manchmal funktioniert Ihre Schriftart in Google Chrome oder einem der anderen Browser, aber nicht in jedem Browser.

Es gibt viele Gründe für diesen Fehlertyp. Einer der Hauptgründe für dieses Problem ist die zuvor festgelegte Schriftart. Sie müssen nach dem Ende jeder Zeile des CSS-Codes ein! Important-Schlüsselwort wie folgt hinzufügen:

Beispiel:

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

Beschreibung: Geben Sie den obigen Code in Ihre CSS-Datei oder den Code hier ein. Ersetzen Sie im obigen Beispiel "Hacen Saudi Arabia" durch Ihre Schriftfamilie und ersetzen Sie die URL gemäß Ihrem Schriftverzeichnis.

Wenn Sie! Important in Ihren CSS-Code-Browser eingeben, wird der Fokus automatisch auf diesen Abschnitt gelegt und die zuvor verwendete Eigenschaft überschrieben. Weitere Informationen finden Sie unter: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

0
Ganesh Garad