@font-face im CSS-Editor von Contao

**lewumpy** · 17.08.2010, 08:18

Hallo Community,

ich habe ein Problem mit der Einbindung von Webschriftarten in Firefox & IE über die @font-face-Regel. Und zwar funktioniert die Darstellung der Schriftart in den aktuellen Versionen von Opera (10.6), Chrome (5.0) & Safari (4.0), aber Firefox (3.6) und IE (8.0) interpretieren die Regel nicht, obwohl sie es sollten.

Ich nutze Contao 2.9.0 und bin dabei folgendermaßen vorgegangen:

In der CSS-Datei habe ich über den Contao-integrierten Editor an erster Stelle folgenden Code unter "Eigener Code" eingegeben mit "@font-face" als Selektor:

Code:

font-family: 'Webfont';
src: url('/tl_files/webfont.eot');
src: local('Webfont'), url('/tl_files/webfont.woff') format('woff'), url('/tl_files/webfont.ttf') format('truetype'), url('/tl_files/webfont.svg') format('svg');
font-weight: normal;
font-style: normal;

Dieses Konstrukt habe ich von Paul Irishs "Bulletproof @font-face syntax" übernommen. Dies sollte also nicht das Problem sein. Lustigerweise interpretieren alle Browser die Syntax, wenn man die komplette @font-face-Syntax in eine eigene CSS-Datei auslagert, welche mit einem normalen Texteditor erstellt wurde (also nicht den Contao-integrierten Editor) und in den Seitenlayouteinstellungen des Themes im Bereich für zusätzliche <head>-Tags eingebunden wird.

Da Contao beim Erstellen einer CSS-Datei im Editor immer erst abfragt, für welche Medientypen diese gültig sein soll und im ausgegebenen CSS-Quellcode dann der Inhalt der CSS-Anweisungen innerhalb einer @media-Regel steht, gehe ich davon aus, dass Firefox & IE anscheinend ein Problem mit verschachtelten @-Regeln haben. Allerdings habe ich davon im Netz kaum etwas gelesen, weshalb ich mich jetzt frage, ob diese Konstellation zu selten vorkommt oder ich irgendwo was falsch gemacht habe.

Mit der Ausgliederung der @font-face-Regel habe ich zwar eine Lösung gefunden, aber zufriedenstellend ist sie nicht, da eine zusätzliche CSS-Datei geladen werden muss, die locker in der eigentlichen CSS-Datei stehen könnte. Gibt es eine Möglichkeit, im Contao-integrierten CSS-Editor Selektoren anzugeben, die außerhalb der @media-Regel stehen?

Viele Grüße
LeWumpy

***Nina*** · 17.08.2010, 08:21

Hm, ich konnte diesen Effekt auch schon beobachten. Bisher habe ich da als Lösung nur die Möglichkeit gefunden, das Stylesheet mit dem Webfont-Aufruf manuell im Seitenlayout einzubinden, damit es nicht auf diese Art und Weise mit dem doppelten "@-Aufruf" kollidiert.

Oder halt das neue Feature von Contao mit dem "Zusammenfügen der Stylesheets" nicht zu nutzen. Was natürlich ziemlich doof ist, da dieses Feature ja sehr sinnvoll ist.

Ich habe mal ein Ticket aufgemacht.

**lewumpy** · 17.08.2010, 14:14

Danke für die schnelle Antwort. Dann werde ich die Webfonts wohl erstmal auf diese Art weiterhin einbinden.

**jabadoo** · 04.11.2010, 16:51

Hallo!

Ich habe genau das gleiche Problem beim aktuellen Projekt. Seltsamerweise funktionierte die @font-face-Regel auf der lokalen Contao-Installation (Mamp auf Mac 10.4). Nachdem ich alles auf den Server geladen hab (DB und Daten), wird die @font-face-Regel einfach aus dem CSS rausgeschmissen - sie existiert einfach nicht mehr. Kann mir das jemand erklären? Weder Firefox, noch Safari zeigen die Schrift an.

Aufgebaut ist sie wie oben, auch die Datenpfade habe ich überprüft - alles in Ordnung.
Ich habe auch versucht, die Regel in eine separate CSS-Datei zu packen und über den Headerbereich im Seitenlayout aufzurufen - kein Erfolg.

Auch das von Nina angelegte Ticket hat mir nicht weitergeholfen.

Vielleicht könnte mir jemand weiterhelfen. Danke schon mal.

Helena

**jabadoo** · 05.11.2010, 08:00

Ich konnte das Problem nun lösen, in dem ich die entsprechenden Font-Dateien direkt in das Derzeichnis der CSS-Dateien gelegt habe.

Seltsamerweise wird der Webfont aber nicht angezeigt, wenn ich die Dateien in einen Unterordner packe oder an eine andere Stelle im Gesamtverzeichnis. (Natürlich habe ich immer die Pfadangaben entsprechend geändert.) Kann mir jemand dieser Verhalten erklären? Zumal es lokal funktioniert hat...

***lucina*** · 05.11.2010, 08:36

Ich nehme mal an, dass dieser Effekt primär unter Firefox auftritt, der nämlich gerne die Pfade verwuselt und ebenso gerne die lokal vorhandenen Varianten der Fonts lädt.

Lesestoff (u.a.): http://paulirish.com/2009/bulletproo...syntax/#smiley oder http://stackoverflow.com/questions/2...-chrome-and-ie

Carolina.

**jabadoo** · 05.11.2010, 09:48

Besten Dank für die Information!

**P_J** · 15.05.2011, 12:47

Das Ticket hab ich gelesen, auch das Changelog dazu. Aber es funktioniert nicht.
Wenn ich den @font-face Aufruf über Contao realisier wird keine Schrift geladen, wenn ich es allerdings über eine von Hand geschriebene Testseite integrier wird alles geladen.
Es funktioniert auch, wenn ich den von Hand geschriebenen CSS-File direkt über nen Aufruf in im fe_page.tpl lad.

Weiß jemand von euch einen Ratschlag?

**tblumrich** · 15.05.2011, 20:44

Zitat von P_J

Weiß jemand von euch einen Ratschlag?

Vielleicht ist folgende Erweiterung eine Alternative?
http://www.contao.org/erweiterungsli...ew/wfl.de.html

Gruß
Thomas

**dragon** · 27.07.2012, 15:50

kleiner Hinweis: wer im Firefox NoScript installiert hat, bei dem werden Webfonts nicht geladen, es sei denn man ändert dies in den NoScript-Einstellungen: unter "eingebettete Objekte" Häckchen raus bei "nachladen von Schriften mittels Font-Face verbieten".