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 *;
}