@font-face im CSS-Editor von Contao
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
Tip: Webfonts funktionieren nicht mit NoScript
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".
