{gelöst}@font-face im Firefox funktioniert nicht..

otter24 · 10. September 2011 14:06

aahhhhhh ich werde wahnsinng ...
Kurz mal eben ein Schrift mit @font-face einbinden...
schon gefühlte 1500 mal gemacht, allerdings immer auf reinen Html Seiten noch nie in CMSMS da hab ich immer die Google Variante genommen.

Also der IE 7 klappt, Chrome klappt, Safari klappt, nur der Firefox ziggt ab. Der zeigt gar nichts an ....
Lokal also wenn ich eine Html-Seite baue klappt das natürlich auch im Firefox nur im Firefox per CMSMS ausgeliefert .. nichts !

Das CSS

Hier klicken, um den Code zum Kopieren zu markieren

[== CSS ==]
@font-face { font-family: 'SCRIPTBL'; src: url('../../uploads/font/SCRIPTBL.eot');
src: local('☺'), url('../../uploads/font/SCRIPTBL.woff') format('woff'), 
url('../../uploads/font/SCRIPTBL.ttf') format('truetype'), 
url('../../uploads/font/SCRIPTBL.svg') format('svg');     
font-weight: normal;     
font-style: normal; }

und

Hier klicken, um den Code zum Kopieren zu markieren

[== CSS ==]
.script     {font-family:'SCRIPTBL',Sans-Serif; }

und das Html

Hier klicken, um den Code zum Kopieren zu markieren

[== Html ==]
<h1 class="script">Hier geht’s nicht um die Wurst, sondern ums Wort.</h1>

ich werde Irre ...

Gruß aus HH

Beitrag geändert von otter24 (10. September 2011 21:08)

piratos · 10. September 2011 17:25

Seite mit Chrome aufrufen, Element prüfen und schauen ob die Ressourcen und Network ok sind.

Cherry · 10. September 2011 17:26

Das Problem hatte ich auch mal.
Ich hab das dann schlussendlich so gelöst, dass ich die font files ins document root gelegt hab und auch die css Datei, die die Schriften einbindet. Nicht genial, aber anders wollte es einfach nicht klappen.

VG
Cherry

otter24 · 10. September 2011 21:07

aaahhhhh warum einfach wenn es auch kompliziert geht.
@ piratos. Danke für den Tipp aber das fiese war ja das der Chrome die Schrift richtig dargestellt hat, insofern war natürlich auch alles OK. Dann hab ich das gleiche aber mippem Firebug im FF gemacht und siehe da die Schriften hat der FF sich nicht gezogen. Da es aber in Safari Chrome und sogar im IE funktionierte, musste es ein FF Problem sein. Dein Tipp hat mich auf den richtigen Weg gebracht.

@Cherry Sauber das war die Lösung. Die Schriften hatte ich schon vorher im document root, aber das CSS file nicht. Jetzt klappt das und auch der FF zieht sich die Schrift.

Mann eyyyy danke!!

kurtkk · 27. Januar 2012 17:19

Habt Ihr nicht mal nach "@font face funktioniert nicht mit firefox" gegoogelt?
Dann hättet Ihr sicher auch das gefunden: kupix.de/nc/news/font-face-im-firefox-funktioniert-nicht.html wink

mike-r · 27. Januar 2012 17:47

Wenn Du auf's Datum der Beiträge hier schaust und das mit dem Datum Deines Links vergleichst fällt Dir möglicherweise etwas auf.
Davon ab glaube ich nicht, dass FF mit der relativen URL nicht klarkommt. Um das zu beurteilen müsste man mal ein Testcase sehen...

Beitrag geändert von mike-r (27. Januar 2012 17:49)

kurtkk · 27. Januar 2012 18:08

Huch, hast Recht, ist schon ein paar Monate her! - Sorry, hatte das über Google gefunden.

NaN · 03. April 2012 21:35

*rauskram*

Es liegt übrigens daran, dass der Firefox da sehr restriktiv ist, was die sogenannte "file uri origin" Regel angeht. D.h. man kann im Firefox keine Fonts einbinden, die nicht von exakt der gleichen URL stammen wie die Seite/das CSS.
Man kann diese Einstellung im Firefox zwar ändern, aber das dürfte die wenigsten wirklich interessieren.
Dafür kann man aber versuchen, dem Firefox über einen zusätzlichen Header zu erlauben, auch Dateien aus einem anderen (unter)Verzeichnis einzubinden. Diesen Header kann man in der .htaccess-Datei setzen:

Hier klicken, um den Code zum Kopieren zu markieren

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

(Quelle: http://stackoverflow.com/questions/2856 … ome-and-ie )

Habe das gerade an einer Live-Site bei All-Ink. ausprobiert.
Klappt wunderbar.

mike-r · 04. April 2012 15:49

Alternativ könnte man die Schriften auch ganz oldstyle vom "eigenen" Server holen. (Was btw auch den Vorteil hat, dass man seine Browserhistory nicht bei Google&Co abkippt...)

Allerdings sehe ich im Startbeitrag keinen fremden Server, da scheint/schien was anderes zu klemmen.

NaN · 04. April 2012 16:05

Alternativ könnte man die Schriften auch ganz oldstyle vom "eigenen" Server holen.

Ich schrieb von einer .htaccess-Datei.
Und die soll bei Fonts einen zusätzlichen Header setzen.
Was doch nur dann geht, wenn die Schriften vom "eigenen" Server kommen wink

Denn das Problem beim Firefox ist, egal woher die Schriften kommen, es funktioniert nur dann, wenn sie nicht nur von der selben Domain kommen wie die Seite/das CSS, sondern auch im selben Pfad sind. Und das liegt an strengeren Restriktionen im Firefox.
Und das kann man eben durch zusätzliche Header umgehen.

Ich persönlich mag es nicht, wenn die Schriften und eine zusätzliche CSS Datei im Root rumschwirren. Bei einem "vollständigen" Schriftsatz (sagen wir mal Normal, Bold, Italic, BoldItalic) und das Ganze dann auch noch als .eot, .woff, .ttf und .svg + CSS ...das hätte ich der Übersichtlichkeit zuliebe in einem Verzeichnis namens "fonts". Und genau da zickt der FF eben rum.

mike-r · 04. April 2012 16:49

Oh smile

NaN schrieb:

Denn das Problem beim Firefox ist, egal woher die Schriften kommen, es funktioniert nur dann, wenn sie nicht nur von der selben Domain kommen wie die Seite/das CSS, sondern auch im selben Pfad sind.

Das stimmt so nur bedingt. Ich hab mir mal ein Testcase gebaut mit allen erdenklichen Pfaden und Pfadoptionen und das läuft komplett. (ausser fremde Domain natürlich)
Funktioniert:

Hier klicken, um den Code zum Kopieren zu markieren

../font.otf
font.otf
blablubb/font.otf
/blablubb/font.otf
http://intern.example.org/blablubb/font.otf

(die entsprechenden Dateien liegen natürlich redundant in den entsprechenden Ordnern)

Interessanterweise funktioniert das SO nicht lokal unter Windows, dort versagt "../"

NaN · 04. April 2012 17:25

Wo liegt in Deinem Testcase die CSS Datei?
Ich hatte die Stylesheets ganz normal eingebunden ({cms_stylesheet}).
D.h. die Seite kommt aus dem Root, CSS aus /tmp/cache/ und die Fonts aus /uploads/fonts/.
Und da wollte der FF die Fonts nicht aus dem Uploads-Verzeichnis laden.
(Hatte im CSS die vollständige URL angegeben)
Das komische ist, dass laut Netzwerk-Konsole im Firebug die Fonts geladen worden sind.
Sie sind nur nicht ... eingebunden worden.
Und seit dem ich den Header gesetzt habe, kann ich die Fonts hinpacken wo ich will.

mike-r · 04. April 2012 20:48

NaN schrieb:

Wo liegt in Deinem Testcase die CSS Datei?

Bisher im Ordner des Dokumentes. Nun grad testweise auch mal die Datei verschoben in einen Ordner nach oben und die Pfade angepasst -> geht alles. Selbes in einem Ordner unterhalb.
Soweit ich das überblicke hab ich kein mögliches Szenario ausgelassen, ich konnte das kaputte Verhalten in keinem Falle provozieren.

Edit: Bin grad noch bisschen am rumstricken, habe jetzt tatsächlich was gefunden (oder ich mach was fasclh). Melde mich dann morgen nochmal dazu....

Beitrag geändert von mike-r (04. April 2012 21:20)

NaN · 05. April 2012 22:41

Also soweit ich das jetzt in Deinem Test sehen konnte, sind CSS und Font immer im selben Verzeichnis. Außerdem hast Du immer eine extra CSS Datei für die Fonts. Ich habe nur ein einziges Stylesheet mit {cms_stylesheet}. Und das wird aus /tmp/cache/ geladen. D.h. CSS und Font sind nicht im selben Verzeichnis. Ich müsste die Fonts ins Cache-Verzeichnis packen, aber da bleiben sie ja nicht lange. Wenn ich die Font-Deklarationen aus meinem CSS rausnehme und mit ins Fonts-Verzeichnis auslagere, dann funktioniert es auch bei mir. Aber dann habe ich einen ganzen Request mehr, nur für 300 Byte CSS-Daten.

Also solange CSS und Font im selben Verzeichnis sind, scheint es im FF keine Probleme zu geben.

mike-r · 05. April 2012 23:02

NaN schrieb:

Also soweit ich das jetzt in Deinem Test sehen konnte, sind CSS und Font immer im selben Verzeichnis.

Nein. Es sind 3 CSS-files in unterschiedlichen Ordnern (Elternordner, Kindordner, gleicher Ordner).
Jedes CSS-File ruft wiederum die Fonts aus den jeweils unterschiedlichen Ordnern auf. (Der Aufruf gleicher Ordner ist pro CSS nur ein einziges mal.)

Ich pack das morgen mal auf 'ne Seite, die ich hier auch dauerhaft verlinken kann.

mike-r · 05. April 2012 15:38

So, hier mein Testcase:
http://www.mydanmark.de/fontface/fonttest/
Ausser extern (logisch...) konnte ich keine Probleme provozieren. Was mach ich falsch? wink

Forum für CMS/made simple

#1 10. September 2011 14:06

{gelöst}@font-face im Firefox funktioniert nicht..

#2 10. September 2011 17:25

Re: {gelöst}@font-face im Firefox funktioniert nicht..

#3 10. September 2011 17:26

Re: {gelöst}@font-face im Firefox funktioniert nicht..

#4 10. September 2011 21:07

Re: {gelöst}@font-face im Firefox funktioniert nicht..

#5 27. Januar 2012 17:19

Re: {gelöst}@font-face im Firefox funktioniert nicht..

#6 27. Januar 2012 17:47

Re: {gelöst}@font-face im Firefox funktioniert nicht..

#7 27. Januar 2012 18:08

Re: {gelöst}@font-face im Firefox funktioniert nicht..

#8 03. April 2012 21:35

Re: {gelöst}@font-face im Firefox funktioniert nicht..

#9 04. April 2012 15:49

Re: {gelöst}@font-face im Firefox funktioniert nicht..

#10 04. April 2012 16:05

Re: {gelöst}@font-face im Firefox funktioniert nicht..

#11 04. April 2012 16:49

Re: {gelöst}@font-face im Firefox funktioniert nicht..

#12 04. April 2012 17:25

Re: {gelöst}@font-face im Firefox funktioniert nicht..

#13 04. April 2012 20:48

Re: {gelöst}@font-face im Firefox funktioniert nicht..

#14 05. April 2012 22:41

Re: {gelöst}@font-face im Firefox funktioniert nicht..

#15 05. April 2012 23:02

Re: {gelöst}@font-face im Firefox funktioniert nicht..

#16 05. April 2012 15:38

Re: {gelöst}@font-face im Firefox funktioniert nicht..

Fußzeile des Forums