CSS - Font von Cross-Origin Resource Sharing-Politik wird <a href="https://www.stubwire.com" rel="noreferrer">https://www.stubwire.com</a>

Question

Auf meiner Website blockiert, wenn die Leute einen Bestellvorgang beginne ich die CSS-Datei aus https://files.stubwire.com bin Laden. Das Problem ist, dass die CSS-Datei versucht, die Schriftart mit dem Fehler zu laden. Kann mir jemand helfen, dieses Problem zu beheben? Meine Fixes, die ich gesehen habe, sprechen über die Verwendung von Amazon S3, aber das wird von unseren eigenen Servern geladen. Kein Header ist für die angeforderte Ressource vorhanden 'Access-Control-Allow-Origin':

Fehler

Font von Herkunft 'https://files.stubwire.com' aus Belastung durch Cross-Origin Resource Sharing Politik wurde gesperrt. Ursprung 'https://www.stubwire.com' ist daher nicht erlaubt.

CSS-Code Quelle: https://files.stubwire.com/static/stubwire_v3/style.css?date=20141213

@font-face { 
    font-family: 'DroidSansRegular'; 
    src: url('fonts/DroidSans-webfont.eot'); 
    src: url('fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DroidSans-webfont.woff') format('woff'), 
     url('fonts/DroidSans-webfont.ttf') format('truetype'), 
     url('fonts/DroidSans-webfont.svg#DroidSansRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 

Answer 1

Wenn Sie den Server steuern, dann können Sie die Einstellungen Ihres Servers Apache/Nginx einstellen oder was auch immer die Access-Control-Allow-Origin Header auf Ihre HTTP-Antworten hinzuzufügen.

In Ihrem Fall möchten Sie wahrscheinlich so etwas wie (dies ermöglicht Ihre Domain die Schriften zugreifen, aber verhindern, dass andere Domänen es nicht verwenden können, einschließlich Ihrer eigenen Subdomains):

Access-Control-Allow-Origin: https://www.stubwire.com 

Ich habe den Access-Control-Allow-Origin Kopf Verwendung von: http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Hier ist eine weitere Ressource, die Beispiele dafür, wie einzurichten verschiedene Server (IIS, Nginx, Apache) hinzufügen, um die Access-Control-Allow-Origin Header gibt: http://support.maxcdn.com/how-to-use-cdn-with-webfonts/

Answer 2

In Ihrem CSS, in dem Sie die Schriftart anstelle einer HTTP-Antwort laden, sollten Sie HTTPS verwenden.

Zum Beispiel im Code:

@font-face { 
font-family: 'DroidSansRegular'; 
src: url('http://...fonts/DroidSans-webfont.eot'); 
src: url('fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'), 
    url('fonts/DroidSans-webfont.woff') format('woff'), 
    url('fonts/DroidSans-webfont.ttf') format('truetype'), 
    url('fonts/DroidSans-webfont.svg#DroidSansRegular') format('svg'); 
font-weight: normal; 
font-style: normal; 

}

es Fabrikat:

src: url('https://...fonts/DroidSans-webfont.eot'); 

dies mit all Ihren Schriften.