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

Der folgende Code funktioniert sowohl in Google Chrome Beta als auch in IE 7. Firefox scheint jedoch ein Problem damit zu haben. Ich vermute, dass es sich um ein Problem handelt, wie meine CSS-Dateien enthalten sind, da ich weiß, dass Firefox domänenübergreifende Importe nicht besonders unterstützt.

Aber das ist alles nur statisches HTML und es gibt keine Frage von domänenübergreifendem.

Auf meiner Landing-Page.html mache ich einen CSS-Import wie folgt:

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

Innerhalb der main.css habe ich noch andere Importe wie folgt:

@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 Speicherort wie type.css. Dieses Schriftverzeichnis enthält alle woff / ttf / svg-Dateien usw.

Ich bin in diesem Fall ratlos. Es funktioniert in Chrome und IE, aber nicht in Firefox . Wie ist das möglich? Was vermisse ich?

LOKAL LAUFEN DER WEBSITE ( file:///)

Firefox file:///wird standardmäßig mit einer sehr strengen "file uri origin" ( ) -Richtlinie geliefert: Damit es sich wie andere Browser verhält, gehen Sie zu about:config, filtern Sie nach fileuriund schalten Sie die folgenden Einstellungen um:

security.fileuri.strict_origin_policy

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

VERÖFFENTLICHTE WEBSITE

Gemäß meinem Kommentar unten und wenn dieses Problem nach der Bereitstellung Ihrer Site auftritt, 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 für jede angeforderte .ttf / .otf / .eot-Datei einen zusätzlichen Header 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: Andernfalls versuchen Sie, die Base64-Codierung zu verwenden für Ihre Schriftart zu verwenden, hässlich, aber es funktioniert möglicherweise auch.

Eine schöne Zusammenfassung finden Sie hier

Zusätzlich zum Hinzufügen von Folgendem 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 ... wie folgt:

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 können).

# 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

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 Ihrem CSS für Schriftarten hinzufügen:

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

Ich lasse dies einfach hier, weil mein Kollege eine Lösung für ein verwandtes Problem gefunden hat: "Schriftart funktioniert nicht mit Firefox, sondern überall sonst".

Das Problem war nur, dass Firefox die Deklaration der Schriftfamilie durcheinander gebracht hat. Dies hat das Problem behoben:

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

PS: Ich habe auch html5boilerplate verwendet.

Ich hatte das gleiche Problem. Überprüfen Sie Ihren Code mit der Regel @ font-face auf H1, H2 oder einen anderen Stil, auf den Sie abzielen. Ich stellte fest, dass mir ein Koma fehlte, nachdem font-family: 'custom-font-family' Arial, Helvetica etces in jedem Browser außer Firefox einwandfrei angezeigt wurde. Ich habe das Koma hinzugefügt und es hat funktioniert.

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

Zuvor befand sich der Ordner "fonts" 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 oben erwähnt, 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");
}

Ich hatte genau dieses Problem mit ff4 auf einem Mac. Ich hatte einen lokalen Entwicklungsserver ausgeführt 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 wenn ich tiefer navigiere, wird standardmäßig das Browser-Stylesheet verwendet.

Ich fand die Lösung darin, die folgende Deklaration zu .htaccess hinzuzufügen

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

gefunden über

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 den Expertenmodus , scrollen Sie nach unten und wählen Sie unter CSS-Optionen Base64-Code aus Das heruntergeladene Font-Kit kann jetzt per Plug-and-Play .

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

Ich würde erwähnen, dass einige Schriftarten Probleme in Firefox haben, wenn ihr Dateiname bestimmte Zeichen enthält. Ich bin kürzlich auf ein Problem mit der Schriftart 'Modulus' gestoßen, die den Dateinamen '237D7B_0_0' hatte. Das Entfernen der Unterstriche im Dateinamen und das Aktualisieren des CSS auf den neuen Dateinamen löste dieses Problem. Andere Schriftarten mit ähnlichen Zeichen haben dieses Problem nicht, was sehr merkwürdig ist ... wahrscheinlich ein Fehler in Firefox. Ich würde empfehlen, Dateinamen nur für alphanumerische Zeichen zu verwenden.

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

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

Wenn Sie den Kit-Generator von FontSquirrel weiterhin verwenden möchten, verwenden Sie die Smiley-Hack-Option, um lokale Schriftprobleme zu beseitigen. Überprüfen Sie nach dem Generieren eines Kits, ob die generierte 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 Standard-Debugging-Methoden - suchen Sie nach 404 und gehen Sie Zeile für Zeile, bis Sie das Problem finden. WOFF sollte auf jeden Fall in FF funktionieren, das ist also ein guter Anfang.

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

Versuchen Sie, die lokale Quelldeklaration in Ihren @font-faceAnweisungen zu verfeinern .

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

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

Um die lokale Deklaration effektiv zu verfeinern, machen Sie einfach Ihre lokale Quellzeichenfolge 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 in seinem Blog:

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

Testen Sie dies in lokalen Dateien oder außerhalb eines Webservers? Dateien in verschiedenen Verzeichnissen werden für domänenübergreifende Regeln als unterschiedliche Domänen betrachtet. Wenn Sie also lokal testen, können domänenübergreifende Einschränkungen auftreten.

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

Außerdem würde ich vorschlagen, in der Firefox-Fehlerkonsole nachzusehen, ob CSS-Syntaxfehler oder andere Fehler gemeldet werden.

Außerdem möchte ich darauf hinweisen, dass Sie wahrscheinlich eine Schriftgröße wünschen: fett in der zweiten @ font-face-Regel.

Die Verwendung der .htaccess-Zugriffssteuerungsregel "Origin zulassen" hat bei mir nicht funktioniert, als ich mit diesem Problem konfrontiert wurde.

Fügen Sie stattdessen in IIS in der Datei web.config den unten gezeigten Block system.webServer 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 hat für mich wie ein Zauber gewirkt. Wenn Sie den Zugriff auf eine bestimmte Domain beschränken müssen, ersetzen Sie das * durch die Domain.

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 vor dem Verzeichnis, in dem sich die Schriftart im URL-Attribut befindet, einen Schrägstrich ein. Hier ist meine Vorher- und Nachher-Version:

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? Dies weist den Browser an, im Stammverzeichnis zu beginnen und dann auf die Ressource zuzugreifen. Zumindest für mich - Problem gelöst.

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 gut in Google Chrome oder einem der anderen Browser, aber nicht in jedem Browser.

Es gibt viele Gründe für diese Art von Fehler. Einer der Hauptgründe für dieses Problem ist die vorherige per-definierte Schriftart. Sie müssen das wichtige Schlüsselwort nach dem Ende jeder Zeile CSS-Code 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 hier den obigen Code in Ihre CSS-Datei oder Ihren Code ein. Im obigen Beispiel ersetzen Sie "Hacen Saudi Arabia" durch Ihre Schriftfamilie und ersetzen Sie die URL gemäß Ihrem Schriftverzeichnis.

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

Kannst du mit Firebug nachfragen, ob du 404 bekommst? Ich hatte Probleme im Pass und stellte fest, 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!

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

Probieren Sie es 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";
}

Versuche dies....

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

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. Das Ändern meines Stylesheet-Links href zu /style.css hat stattdessen Probleme für mich behoben.

Vielleicht ist Ihr Problem ein Namensproblem, insbesondere im Hinblick auf die Verwendung (oder nicht) von Leerzeichen und Bindestrichen.

Ich hatte ein ähnliches Problem, das ich durch Platzieren des optionalen Problems behoben hatte Anführungszeichen (') um Schrift- / Familiennamen setzte, aber das hat implizit ein Namensproblem behoben.

Ich bin in Bezug auf die CSS-Spezifikation nicht ganz auf dem neuesten Stand, und es gibt (zumindest für mich) einige Unklarheiten darüber, wie verschiedene Kunden 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!

Wie auch immer ich es jetzt verstehe, Ihre Erklärung verwendet eine Mischung aus zwei möglichen unterschiedlichen Geschmacksrichtungen.

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

Wenn Sie Droid als den tatsächlichen Familiennamen betrachten, zu dem Sans und Serif gehören, wie zum Beispiel ihre Kinder Sans Regular oder Serif Bold , verwenden Sie entweder überall Leerzeichen, um Bezeichner zu verknüpfen, oder 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";

ODER

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

Ich denke, beide sollten vollkommen legal sein, entweder mit oder ohne die Zitate, aber ich hatte gemischten Erfolg damit 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 der Aspekte zu verstehen: http://mathiasbynens.be/notes/unquoted-font-family

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

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

Dies

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

wird dies

body {font-family: DroidSerifRegular, serif; }

In meinem Fall habe ich das Problem beim Einfügen von Code für Schriftarten behoben

<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 im Header auf Ihrer index.html- oder PHP-Seite im Style-Tag. Funktioniert bei mir!

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) aus dem src der Schriftart entfernen, dann funktionierte es auch in Firefox. Davor hat es in Chrome und Safari gut funktioniert.

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

Versuchen Sie dies von Tool bar Western bis Unicode

View > Text Encoding > Unicode

Ich hatte das gleiche Problem und löste es durch Hinzufügen von Meta für Inhalte:

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

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

Ich weiß nicht, wie Sie die Syntax erstellt haben, da ich nie svg in der Schriftdeklaration verwendet habe, aber Font Squirel hat ein wirklich gutes Werkzeug, um aus nur einer Schrift eine kugelsichere Syntax-Schrift zu erstellen.

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

Könnte auch die Verwendung der URL im Pfad des Font-Face-Tags sein. Wenn Sie "http://domain.com" verwenden, funktioniert es in Firefox nicht. Für mich hat es funktioniert, es in "http://www.domain.com" zu ändern.

Mein Problem war, dass Windows die Schriftart 'font.TTF' nannte und Firefox 'font.ttf' erwartete. Ich sah, dass nach dem Öffnen meines Projekts unter Linux die Schriftart in den richtigen Namen umbenannt wurde und alles funktioniert