CSS - Font bloccato dai criteri di condivisione delle risorse tra origini

Question

Sul mio sito Web https://www.stubwire.com quando le persone avviano un processo di ordinazione sto caricando il file CSS da https://files.stubwire.com. Il problema è che il file CSS sta cercando di caricare il font che dà l'errore. Qualcuno può aiutarmi a mostrarmi come risolvere questo problema? Le mie correzioni che ho visto parlano dell'utilizzo di Amazon S3, ma questo è il caricamento dai nostri server.

errore

carattere di origine 'https://files.stubwire.com' è stato bloccato dal caricamento dalla politica di condivisione delle risorse Cross-Origin: No 'Access-Control-Allow-Origin' intestazione è presente la risorsa richiesta. L'origine 'https://www.stubwire.com' non è quindi consentita l'accesso.

codice CSS Fonte: 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

Se controlli il server, è possibile regolare le impostazioni del server Apache/Nginx o qualsiasi altra cosa per aggiungere l'intestazione Access-Control-Allow-Origin alle vostre risposte HTTP.

Nel tuo caso, probabilmente si desidera qualcosa di simile (questo permetterà il dominio per accedere ai tipi di carattere, ma impedire che altri domini di usarlo, compresi i propri sottodomini):

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

ho avuto l'intestazione Access-Control-Allow-Origin utilizzo da: http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Ecco un'altra risorsa che fornisce esempi di come impostare vari server (IIS, Nginx, Apache) per aggiungere il Access-Control-Allow-Origin intestazione: http://support.maxcdn.com/how-to-use-cdn-with-webfonts/

Answer 2

Nel tuo CSS in cui stai caricando il font al posto di una risposta HTTP, trasformalo in HTTPS.

Ad esempio, nel codice:

@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; 

}

Make it:

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

fare questo con tutti i font.