[Gelöst] Eigebundener Font wird in Chrome, aber nicht in Firefox angezeigt

Shopware 5 Themes & Design
1

Hallo zusammen,

ich habe in meinem Template einen eigenen lokal abgespeicherten TrueType-Font mit folgender Webfont.less eingebunden:

@font-face {
    font-family: "Handlee";
    src: url("/themes/Frontend/Superfein/frontend/_public/src/fonts/Handlee-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

Im Backend habe ich die Standardschriftart im Feld „@font-base-stack“  wie folgt eingebunden:

"Handlee", serif;

Bei Chrome und Edge funktioniert’s, aber im Firefox und der Firefox-Android-App wird die Schrift nicht geladen. Es wird stattdessen die Standardschriftart verwendet.

Wäre schön, wenn mir jemand helfen könnte…

2

Hast Du denn schon geprüft (via Firebug), ob die Schriftdatei überhaupt richtig geladen wird?

Evtl. liegt es daran und sie wird in Chrome und Edge aus dem Cache gezogen?

3

Hallo GClbrandlab,

ich habe bei beiden Browsern noch einmal den Cache gelöscht und neu geladen. Ergebnis: Die .ttf wird von meinem Server korrekt geladen - nicht aus dem Cache.

Im Firefox habe ich auch noch einmal den gesamten Cache gelöscht und die Seite erneut geladen. Hier kann man in der Netzwerkanalyse sehen, dass die Datei tatsächlich geladen wird.

Im CSS-Inspektor (Reiter “Berechnet” und Reiter “Regeln”) kann man sehen, dass dem HTML-Element der Font zugewiesen wurde. Aber angezeigt wird sie halt nicht. Im Reiter “Schriftarten” steht nur die Systemschriftart.

Gegenprobe habe ich auch gemacht: Ich habe ein Shopware-icon markiert und den Inspektor aufgerufen. Hier wird wie erwartet unter Schriftarten die Shopware-eigene woff-Schrift angezeigt.

In der Netzwerkanalyse ist mir aufgefallen, dass in der entsprechenden GET-Anweisung im Anfragekopf steht:

Accept: "application/font-woff2;q=1.0,application/font-woff;q=0.9,*/*;q=0.8"

Bedeutet dass, dass Firefox eventuell einen woff-Font erwartet und deshalb nichts mit dem ttf-Font anfangen kann? Nur eine Vermutung…

4

Grad mal schnell eine Suchmaschine benutzt - grob kann man rauslesen, dass auch in 2015 Firefox truetype bei @fontface nicht mochte.

5

Hallo sonic,

ich habe im Vorfeld natürlich auch gegoogelt, aber finde keine Einträge zu Deiner Behauptung.

Im Gegenteil: Laut CanIUse wird ttf bei font-face unterstützt: http://caniuse.com/#feat=ttf, gleiches wird auf  http://www.mediaevent.de/css/font-face.html dargestellt.

Es wird lediglich auf die Same-Server-policy hingewiesen, die greift aber bei meinem Font nicht, da ich die Datei ja auf meinem Server habe. Kannst Du mir einen Link zu Deinem Fund geben?

Auf einer anderen Seite stand sogar die Empfehlung, dass man ttf nutzen sollte, weil es die beste Kompatibilität zu allen Browsern hätte…

Aber angenommen, es liegt an dem font-face: Wie binde ich denn mein .ttf alternativ ohne font-face in Shopware ein? Dann probiere ich das einfach mal aus…

6

Waren schon was älter. Möglich, dass Dein Server das falsch ausliefert und FF da pingeliger ist, als die anderen?

Passt das?
http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie#answer-9570757

7

Hallo,

ich würde die Schriftart (beispielsweise in einer LESS-Datei im eigenen Theme) so einbinden:

@font-face {
	font-family: "Schriftart";
	src: url("../fonts/Schriftart.woff") format("woff"), url("../fonts/Schriftart.ttf") format("ttf"), url("../fonts/Schriftart.eot") format("eot"), url("../fonts/Schriftart.svg") format("svg");
}

.css-mit-font-family {
        font-family: "Schriftart";
}

auch mit allen Endungen, damit man auch alle Browser etc abdeckt.

Beste Grüße

Sebastian

8

Hallo sonic, danke für Deine Antwort.

Ich habe den im Link beschriebenen htaccess.-Fix angewandt, der zusätzliche Header, den ich dann auch in Firefox sehen kann, bringt leider keinen Erfolg. Ebenso den Tipp, die Fonts in den Document Root zu schieben… yes

Ich habe noch einmal eine einfache Seite (ohne Shopware) umgebaut, so dass die bisherige Web-Font-Einbindung durch ein @font-face-nachladen des entsprechenden .tff ersetzt wird. Hier tritt dann das gleiche Problem wieder auf.

Erkenntnis: Das Phänomen ist also unabhängig von Shopware.

@sschreier: Ich wollte die Ladezeiten eigentlich so kurz wie möglich halten, aber ich werde morgen einmal versuchen, die anderen Versionen zusätzlich einzubinden. Google selbst liefert die Fonts nur als .tff aus, aber ich habe über http://www.localfont.com/  die anderen Versionen runterladen können. Danke für den Tipp! Ich sage Bescheid, ob’s geklappt hat.

Falls jemand noch eine geschmeidigere Lösung weiß… gerne her damit…

9

Danke, an euch beide, für eure Tipps, die mich letztendlich auf localfont gebracht hat.

Damit hat es geklappt. Das Problem war tatsächlich, dass Firfox den .woff-Font nicht will.

Mit der mit dem Download und der Einbindung via http://www.localfont.com/  kriegt man alle Dateien und den CSS-Code - ich kann die Seite nur empfehlen.

Bei Google Font selbst wird zum Download immer nur eine -ttf-Datei angeboten, die genau so groß ist, wie alle Dateien der unterschiedlichen Typen zusammen (Vielleicht sind die alle in eine Datei zusammengefasst?)

Schöner Nebeneffekt der Methode der Einzeldateien: Es wird dann immer nur die eine der fünf Fomate runtergeladen - was natürlich der Geschwindigkeit zu Gute kommt.

Schönes Wochenende, Marco