Ich verwende gern die Webfonts Font Awesome um meine Projekte ein wenig zu verschönern. Das Projekt bietet neben einem CDN auch die Möglichkeit die Projektdateien herunterzuladen. Kurz den Pfad zu den Fonts anpassen und schon kann es losgehen.
Bei Absoluten Pfaden hat man aber schnell das Problem, das beim Ablegen der Fonts im CDN (oder unter einer Subdomain für statische Inhalte) der Browser das Laden aufgrund des fehlenden Access-Control-Allow-Origin Header blockt.
Um den Zugriff nun auch von anderen Domains aus zu erlauben, z.B. einer lokalen Testumgebung, kann bei einem Apache die Site-Konfiguration oder eine .htaccess Datei genutzt werden.
Ich habe dazu einfach die folgende Zeilen in die .htaccess geschrieben.
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|svg|woff)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
Hinweis: Beim Apache muss das Modul headers aktiviert sein. Unter Ubuntu funktioniert das wie folgt.
$ sudo a2enmod headers
$ sudo service apache2 restart
Bei der Verwendung eines NGINX einfach die folgenden Zeilen in die Konfigurationsdatei einfügen.
if ($filename ~* ^.*?\.(ttf)|(ttc)|(otf)|(eot)|(svg)|(woff)$){
add_header Access-Control-Allow-Origin *;
}
Nachdem ich
Laut
Da ich mich ja zuletzt um den Internet Explorer unter Ubuntu gekümmert habe, ist es nur fair sich auch die anderen verfügbaren Browser anzusehen. Heute ist also Google Chrome an der Reihe. Google Chrome basiert auf dem Open Source Projekt Chromium und wird von Google direkt erstellt und verbreitet. Die Unterschiede sind recht gering. Eine genaue Liste der Unterschiede zwischen Chrome und Chromium gibts z.B. 