Webdesign
Inhaltsverzeichnis
HTML und CSS
Tutorials
YAML: Framework
Zen Wireframe Typo3 Template
Schriften mittels CSS laden
CSS3 ermöglicht per @font-face eigene Schriftarten einzubetten. Alle modernen Browser unterstützen diese Funktion, auch wenn nicht alle die gleichen Dateiformate unterstützen.
Liegt die referenzierte Schriftart allerdings nicht auf der gleichen Domain stößt man jedoch plötzlich auf das Problem, dass der Code im Firefox nicht mehr funktioniert, in anderen Browsern jedoch schon. Hierbei handelt es sich um eine Sicherheitsfunktion von Firefox, der die Schriften nur lädt, wenn der Webserver ihm dies erlaubt. Hier findet sich die entsprechende Doku von Mozilla. Die Konfiguration kann man in einer .htaccess ablegen, oder direkt in der Apache2 Konfiguration eintragen:
- Für alle den Zugriff auf die Schriftarten erlauben
<FilesMatch "\.(ttf|otf|svg|eot|woff|woff2)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>
- Eingeschränkter Zugriff auf die Schriftarten erlauben
<FilesMatch "\.(ttf|otf|svg|eot|woff|woff2)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "http://sub1.example.com,http://sub2.example.com" </IfModule> </FilesMatch>
Gemäß Mozilla ist die Komma getrennte Angabe mehrerer Domains zulässig. Dies scheint aber nicht immer zu gehen, deshalb hier ein Beispiel mit Regex.
<FilesMatch "\.(ttf|otf|svg|eot|woff|woff2)$"> SetEnvIf Origin » "^http(s)?://(.+\.)?(domain1\.org|domain\.com)$" origin_is=$0 Header always set Access-Control-Allow-Origin %{origin_is}e env=origin_is </FilesMatch> Original Doku: http://www.lowest-common-denominator.com/2010/01/http_access_control_to_multipl.php