Quelle: Unsplash

Cross Origin Schriftarten

Einführung

Fonts sind das Gesicht des Internets. Ohne sie würden Webseiten nicht so gut aussehen, wie sie es jetzt tun. Doch die Integration der Webfonts, also Download, Dateien entpacken, auf dem Server anmelden, hochladen ... das kostet wertvolle Zeit, die man auch anderweitig nutzen könnte. Deshalb ist es beispielsweise sinnvoll die Fonts auf eine Subdomain wie z.B. https://fonts.example.com abzulegen, um später einfach auf diese zugreifen zu können. Doch so einfach ist es nicht. Wenn man den Font, also die fonts.css Datei - kann auch anders heißen ;) - mit dem <link href="https://fonts.example.com/font/fonts.css" rel="stylesheet"> Tag in eine externe Webseite wie example2.com einbindet, merkt man, dass dieser dort nicht funktioniert. Aber warum nicht?

Das Problem

Manche Server verbieten das ausspielen von Dateien auf Webseiten, die nicht auf ihnen selbst gehostet werden. Das nennt man auch Cross Origin Resource Sharing oder kurz CORS. Diese CORS Policy verhindert, dass Fonts von https://fonts.example.com auf example2.com angezeigt werden können. Aber wie umgeht man das?

Die Lösung

Man kann diese Policy ganz einfach über eine .htaccess Datei bearbeiten. Hat man die Änderungen eingepflegt, wird es auch keine Probleme mehr geben, da du dem Server mitteilst, dass er die Fonts auch auf anderen Webseiten ausspielen soll.

Vorgehensweise:

  • Erstelle eine .htaccess Datei
  • Kopiere den folgenden Code und füge ihn in die .htaccess Datei ein:
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
SetEnvIf Origin "http(s)?://(www\.)?(example.com|example2.com|example3.com)$" AccessControlAllowOrigin=$0
Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
</IfModule>
</FilesMatch>
  • Tausche example.com, example2.com, example3.com durch die Domains aus, die deine Font Dateien hosten sowie auf die Dateien zugreifen wollen.
  • Lade sie via FTP auf deinen Webserver hoch. -> Fertig.

Probiere es gleich aus und schreib in die Kommentare, ob es dir geholfen hat. Konstruktives Feedback ist natürlich auch jederzeit willkommen. :)

This article was updated on August 29, 2017

Comments