Fehlende externe Schriftarten und Bilder beheben?
Fragestellungen:
- Warum werden externe Schriftarten oder Bilder in meinem Shop nicht geladen?
- Wie setze ich Google Fonts in meinen Sicherheitseinstellungen auf die Whitelist?
- Was kann ich tun, wenn meine benutzerdefinierte Schriftart durch eine Standardschrift ersetzt wird?
Beschreibung:
Was Ihnen auffällt: Die spezielle Schriftart Ihres Shops wurde auf eine einfache Standardschriftart zurückgesetzt, oder einige Bilder, die auf dem Server eines anderen Unternehmens gehostet werden, fehlen.
Warum das passiert: Schriftarten und Bilder, die vom Server eines anderen Unternehmens stammen, werden nur geladen, wenn dieses Unternehmen auf der Vertrauensliste Ihres Shops steht. Ihre eigenen hochgeladenen Schriftarten und Bilder funktionieren immer; externe müssen genehmigt werden. Ein gängiges Beispiel sind Google Fonts, die von den Servern von Google geladen werden.
Vorgehen:
-
Navigieren Sie zu den Inhaltssicherheitsrichtlinien
Gehen Sie zu Systemkonfiguration → Sicherheitskonfiguration → Richtlinien zur Inhaltssicherheit.
-
Je nachdem, was fehlt, tragen Sie die Webadresse des Anbieters in das entsprechende Feld ein: eine fehlende Schriftart → tragen Sie sie in das Feld „font src“ ein; ein fehlendes Bild → tragen Sie es in das Feld „image src“ ein.
-
Google Fonts (der häufigste Fall)
Beispiel: Google Fonts benötigt zwei Einträge:
- in font src hinzufügen: https://fonts.gstatic.com
- in style src hinzufügen: https://fonts.googleapis.com
- Speichern und neu laden.
Tips und Tricks:
Profi-Tipps:
-
Laden Sie Schriftarten und Bilder direkt auf Ihren eigenen Shop-Server hoch, um die Anforderungen der Whitelist vollständig zu umgehen.
-
Jede externe Schriftart oder jedes Bild kannst du stattdessen auch in deinen Shop hochladen. Dann wird es von deinem eigenen Server bereitgestellt, dem immer vertraut wird – es muss also nichts auf die Whitelist gesetzt werden. Das ist außerdem:
- schneller für Ihre Besucher und
- besser für den Datenschutz / die DSGVO, da keine Daten an den externen Anbieter gesendet werden
Warnungen:
-
Vergewissern Sie sich, dass Sie genau die vom Schriftarten- oder Bildanbieter angegebenen URL-Pfade eingeben, um Sicherheitsblockaden zu vermeiden.
-
Bitten Sie Ihre Webagentur um Unterstützung, wenn Sie Ihren Shop lieber auf ein selbst gehostetes Asset-Modell umstellen möchten.
Hinweis für Ihre Agentur: Blockierte Ressourcen werden als CSP-Verstöße bei „font-src“ bzw. „img-src“ angezeigt. Standardmäßig erlaubt „img-src“ bereits „self“, „data:“ und die Komponentendomäne; „font-src“ erlaubt nur „self“. Fügen Sie Ursprünge im entsprechenden Feld oder über `SecurityUtil::addAllowedSource("https://…", ["font"])` hinzu.