CDN-Probleme mit Schriften (Icons) lösen

Inhalt

Wenn du eine Web-Schrift oder Icon-Schrift (zum Beispiel Font Awesome) und ein CDN verwendest, sind spezielle Regeln erforderlich, um Abfragen ĂŒber verschiedene Domains hinweg („cross domain“) zu erlauben. Sobald du die CDN-Option in WP Rocket aktivierst, schreiben wir die erfoderlichen Regeln fĂŒr CORS Headers automatisch in deine .htaccess-Datei.

Kein Access-Control-Allow-Origin Header

❌ Access to Font has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

Falls du diesen Fehler in der Browser-Konsole findest, heisst das wahrscheinlich, dass die korrekten CORS Regeln nicht existieren. WP Rocket schreibt sie zwar automatisch in die .htaccess eines Apache Servers, aber auf einem NGINX Server musst du Folgendes zu deiner Virtual Host Datei hinzufĂŒgen:

location ~* \.(eot|css|otf|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}

Access-Control-Allow-Origin Header mit mehreren Werten

❌ The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.

Manchmal setzt dein CDN-Anbieter vielleicht bereits eigene CORS Regeln. Dies kann dazu fĂŒhren, dass deine Schriften nicht geladen werden. In der Browser-Konsole wĂŒrdest du dann diesen Fehler sehen:

Die Lösung: Ein Set von CORS Regeln entfernen. Am einfachsten ist es in den meisten FÀllen, das in der AdministrationsoberflÀche deines CDNs zu tun.

Wenn du stattdessen lieber die CORS Regeln aus WP Rocket entfernen möchtest, installiere dazu dieses Plugin:

đŸ“„  Download (.zip):  WP Rocket | No CORS for Fonts
Entwickler/-innen: Ihr findet den Code fĂŒr dieses Plugin auf GitHub.

Schriften innerhalb von Stylesheets

Falls du nach den oben beschriebenen Lösungsschritten immer noch Probleme mit einer Webschrift hast, kann es daran liegen, dass die Schrift aus einem Stylesheet heraus mit relativer URL aufgerufen wird. Beispiel:

In so einem Fall werden die notwendigen Headers nicht auf die Schriftdatei angewendet, und die Datei wird nicht geladen.

Nutze die Entwicklungswerkzeuge in deinem Browser, um herauszufinden, welches Stylesheet die betreffende Schriftdatei einzubinden versucht:

FĂŒge die Stylesheet-URL zum Feld Dateien vom CDN ausschließen unter CDN hinzu:

Falls CSS minifizieren aktiv ist, musst du die betreffende Stylesheet-URL auch dort als Ausnahme hinzufĂŒgen: