Immer mehr Browser interpretieren ja nun mittlerweile im Zuge des CSS-3-Hypes auch die @font-face-Regel, die allerdings bereits in der CSS-2.1-Spezifikation enthalten war. Mit Hilfe dieser Regel ist es möglich eigene Web-Schriftarten auf der Homepage darstellen zu können, ohne z.B. das Menü mit der gewünschten Schriftart als Grafik zusammenbasteln zu müssen. Nur leider unterstützten dies die gängigen Browser bisher kaum. Nur der Internet Explorer (ja wirklich!!) hat diese Regel bereits seit Version 5.5 unterstützt, allerdings nur das proprietäre EOT-Format. Truetype- und Opentype-Schriftarten bleiben bis heute außen vor. Mittlerweile können aber auch Firefox (ab Version 3.5), Safari (ab. 3.1), Opera (ab 10.5) und Chrome (ab 0.2) diese Regel, sodass man nun auf abwechslungsreichere Schriftbilder hoffen kann.

Diese Möglichkeit wollte ich nun auch bei einer Seite nutzen, die ich gerade auf Basis des CMS Contao (aka TYPOlight) aufbaue. Nur leider wurde die Regel im Firefox 3.5 nicht interpretiert, dagegen funktionierte sie im Opera anstandslos. Der Ursache bin ich Dank eines Blogbeitrags von Jens Grochtdreis auf die Spur gekommen.

Ich habe in Contao (Version 2.9.0) das  CSS mit Hilfe des CMS-eigenen Editors zusammengestellt, wobei man beim erstellen der CSS-Datei bereits angeben muss, für welche Medien sie gedacht sein soll. Contao generiert die CSS-Datei aus deinen einzelnen Einträgen automatisch und setzt an den Anfang der Datei die @media-Regel, sodass alle folgenden CSS-Regeln innerhalb dieser @media-Regel stehen. Firefox hat anscheinend ein Problem mit der Interpretation der @font-face-Regel innerhalb anderer @-Regeln. Denn nachdem ich die @font-face-Regel in eine zweite (nicht mit Contao generierte) CSS-Datei ausgelagert hatte, wurde meine Wunschschriftart auch im Firefox angezeigt.

Dies ist natürlich nicht die schönste Lösung, aber sie funktioniert erstmal. Sollte mir noch etwas besseres einfallen, werde ich dies hier natürlich kundtun.

Update 1: Neben Firefox interpretiert auch der aktuelle Internet Explorer 8.0 die @font-face-Regel nicht innerhalb von @media-Regeln.

Update 2: Mittlerweile wurde das Problem bei Contao erkannt und Dank großer Hilfe von Nina Gerling ein Support-Ticket geöffnet. Bei der daraus resultierenden Diskussion stellte sich heraus, dass es in der CSS-2.1-Spezifikation nicht erlaubt ist, innerhalb @media-Regeln andere @-Regeln zu benutzen. Das heißt also nichts anderes, als dass Firefox und Internet Explorer eigentlich nur nach den CSS-Standards arbeiten.

Update 3: Mit der Contao-Version 2.9.2 wurde dieser Fehler behoben, indem CSS-Dateien mit einer @font-face-Regel nicht mehr mit anderen CSS-Dateien zusammengefasst werden.