Cross-domain Verwendung von @font-face im Firefox ermöglichen

CSS3 ermöglicht uns es bekanntlich, per @font-face eigene Schriftarten einzubetten. Alle modernen Browser unterstützen diese Funktion, auch wenn nicht alle die gleichen Dateiformate unterstützen. Das macht zwar die Umsetzung etwas aufwändiger, aber nicht unmöglich. Unsere Website dient als Beispiel dafür.

Cross-domain Verwendung von @font-face

Liegt die referenzierte Schriftart allerdings nicht auf der gleichen Domain, - das gilt auch für Subdomains! - stößt man jedoch plötzlich auf das Problem, dass der Code im Firefox nicht mehr funktioniert, in den anderen Browsern jedoch schon. Warum? Die Antwort liegt auf der Hand: es handelt sich um eine Sicherheitseinschränkung im Firefox, die sogar sehr sinnvoll ist. Dadurch wird verhindert, dass zB fremde Websites die Schriftart von Ihrem Server referenzieren - und damit stehlen.

Zugriff erlauben per .htaccess

Firefox geht also den restriktiven Weg und verbietet den Zugriff auf die Schriftart, wenn die Anfrage von einer fremden Domain kommt und keine explizite Erlaubnis des Servers vorliegt, dass die fremde Domain die Schriftart auch wirklich verwenden darf. Die Erlaubnis kann man in der .htaccess Datei vornehmen, indem man der Schriftart-Datei im HTTP-Header den Wert für die "Access-Control-Allow-Origin" entsprechend setzt. Mozilla dokumentiert das im folgenden Artikel sehr ausführlich: https://developer.mozilla.org/En/HTTP_access_control

Pauschale Erlaubnis für alle Domains

Der einfachste Weg wäre, den Zugriff mit dem Stern als Wildcard für alle Domains zu ermöglichen:

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

Das würde jedoch wieder allen fremden Sites Tür und Tor öffnen, sich an Ihren Schriftarten zu bedienen. Vom Sicherheitsaspekt her ist dieser Ansatz daher nicht empfehlenswert. Besser wäre es, den Zugriff auf bestimmte Domains einzuschränken.

Einschränkung auf bestimmte Domains

<FilesMatch "\.(ttf|otf|svg|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "http://agoradesign.at,http://demo.agoradesign.at"
</IfModule>
</FilesMatch>

Laut der Mozilla-Doku ist die komma-getrennte Angabe mehrerer Domains zulässig - leider nur in der Theorie. Die Schriftart wird leider nicht korrekt geladen, wenn man mehrere Domains angibt. Offensichtlich existiert hier ein Firefox-Bug, der bis dato (Version 3.6.8) noch nicht beseitigt wurde.

Firefox-taugliche Variante

Kurz bevor wir zu der unschönen Lösungsvariante gegriffen haben, die Schriftarten in mehreren Ordnern mit unterschiedlichen Zugriffsrechten zu duplizieren, sind wir zum Glück noch auf diesen tollen Artikel gestoßen, der das Problem mittels RegEx löst: http://www.lowest-common-denominator.com/2010/01/http_access_control_to_multipl.php

Folgende Variante erlaubt den Zugriff von agoradesign.at, agora-design.at und allen Subdomains davon:

<FilesMatch "\.(ttf|otf|svg|eot)$">
SetEnvIf Origin "^http(s)?://(.+\.)?(agoradesign\.at|agora-design\.at)$" origin_is=$0
Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>

Vielen Dank an Brook Elgie für diese sehr elegante Problemlösung!