CDN-Probleme mit Schriften (Icons) lösen

Falls du eine Icon-Schrift, wie beispielsweise Font Awesome, oder sonst eine eigene Schrift auf deiner Website verwendest, wird es mit deinem CDN, aufgrund der Cross Domain Policies der gängigen Browser, wahrscheinlich zu Problemen kommen.

Um diese zu lösen, musst du in deinen Seiten-Headers Cross Domain Origin ausdrücklich erlauben. Sofern du ein eigenes CDN benutzt, kopiere dies in deine .htaccess-Datei:

# ----------------------------------------------------------------------
# CORS-enabled images (@crossorigin)
# ----------------------------------------------------------------------
# Send CORS headers if browsers request them; enabled by default for images.
# developer.mozilla.org/en/CORS_Enabled_Image
# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/
# wiki.mozilla.org/Security/Reviews/crossoriginAttribute
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    # mod_headers, y u no match by Content-Type?!
    <FilesMatch "\.(gif|png|jpe?g|svg|svgz|ico|webp)$">
      SetEnvIf Origin ":" IS_CORS
      Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
  </IfModule>
</IfModule>
# ----------------------------------------------------------------------
# Webfont access
# ----------------------------------------------------------------------
# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

Läuft deine Website auf einem Nginx-Server, kopiere diesen Code in deine Virtual-Host-Datei:

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

Für MaxCDN kannst du die hier angebotene Lösung nutzen.

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, wie z.B. so:

src:url('../fonts/etc.')')

Selbst wenn du die oben genannten Schritte vollzogen hast, werden in so einem Fall die notwendigen Headers noch nicht auf die Schriftdatei angewendet und die Datei nicht geladen.

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

Style panel in Chrome developer tools: style declaration with stylesheet link next to it

Lösung

Füge die Stylesheet-URL zum Feld Dateien ausschließen im CDN-Tab hinzu:

CDN → Dateien ausschließen

Falls du CSS-Minifizierung aktiviert hast, musst du die betreffende Stylesheet-URL auch von der CSS-Minifizierung ausschließen:

Erweiterte Einstellungen → CSS-Dateien, die nicht minifiziert werden sollen