Während ich lokal gearbeitet habe, hat alles perfekt geklappt, jetzt habe ich auf ein Hosting hochgeladen und die Schriften werden von etwas blockiert, von dem ich noch nie gehört habe (CORS). Die Schriftarten (und CSS, JS usw.) befinden sich in einer Unterdomäne, da URLs vom Index analysiert werden (Pfade funktionieren in der Domäne also nicht). Die CSS / JS funktionieren einwandfrei.

Dies ist die Ausgabe in der Webkonsole (Firefox):

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/Oxygen-Regular.ttf. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
downloadable font: download failed (font-family: "Oxygen-Regular" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: /fonts/Oxygen-Regular.ttf styles.css:10:12
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/Montserrat-Regular.ttf. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
downloadable font: download failed (font-family: "Montserrat-Regular" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: /fonts/Montserrat-Regular.ttf styles.css:6:12
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/glyphicons-halflings-regular.woff2. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: /fonts/glyphicons-halflings-regular.woff2 bootstrap.css:267:12
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/glyphicons-halflings-regular.woff. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed source: /fonts/glyphicons-halflings-regular.woff bootstrap.css:267:12
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/glyphicons-halflings-regular.ttf. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:3): bad URI or cross-site access not allowed source: /fonts/glyphicons-halflings-regular.ttf bootstrap.css:267:12

Ich habe nach diesem Problem gesucht, aber ich kann dieses spezielle Problem mit den Schriftarten und der genauen Fehlermeldung nicht finden.

BEARBEITEN

Der Fix besteht darin, den Header für die Domäne / den Ordner zu aktivieren, die / der die Dateien bereitstellt. Die Konfiguration kann sich entweder im virtuellen Hostblock oder in einer .htaccess-Datei (in dem Ordner, in dem sich die Dateien befinden) befinden. Ich bevorzuge es im vhost-Block zu setzen:

<IfModule mod_headers.c>
    SetEnvIf Origin "https://(www|sub1|sub2|sub3).domain.com)$" ACAO=$0
    Header set Access-Control-Allow-Origin "%{ACAO}e" env=ACAO
    Header set Access-Control-Allow-Methods "GET"
</IfModule>

In diesem Beispiel wird dasAccess-Control-Allow-Origin sendet nur den Header für die Whitelist-Domain und Subdomains. Ich leite von @ domain.com zuwww.domain.com daher akzeptiert dieses Beispiel keine Domain ohnewww.