Intestazione della risposta CORS (condivisione delle risorse multiorigine) mancante
Browser:
- Firefox (versione 3.5 e successive)
- Internet Explorer (9+)
- Chrome (oltre 37)
Panoramica
Chrome, Firefox e le versioni più recenti di Internet Explorer applicano lo standard di condivisione delle risorse tra origini e pertanto visualizzano solo i caratteri web pubblicati con l'intestazione della risposta "Access-Control-Allow-Origin" appropriata. Poiché i caratteri Google Fonts possono essere visualizzati su qualsiasi dominio, i caratteri vengono pubblicati con la seguente intestazione della risposta:
Access-Control-Allow-Origin:*
Possibile causa
Alcuni proxy potrebbero eliminare l'intestazione dalla risposta, dopodiché il browser non visualizzerà i caratteri.
Diagnostica
Con Chrome, cerca il messaggio di avviso pertinente nella console DevTools.
Con Firefox, è possibile utilizzare le estensioni Intestazione HTTP dal vivo o [^ per visualizzare le intestazioni della risposta e confermare la presenza dell'intestazione della risposta CORS.
Link
I caratteri web non vengono visualizzati in Firefox quando è installato il plug-in NoScript
Browser: * Firefox (versione 3.5 e successive)
Panoramica
Firefox non visualizza i caratteri web quando è installato il plug-in NoScript.
Possibile causa
Per impostazione predefinita, il plug-in NoScript disattiva le regole @font-face.
Soluzione
Apri le opzioni NoScript, vai alla scheda Incorporamenti e deseleziona: Forbid @font-face
I caratteri web non vengono visualizzati
Browser: * tutti
Panoramica
I caratteri web utilizzati non vengono visualizzati.
Possibile causa
È presente un errore nell'URL dell'API o è stato richiesto uno stile non supportato dal carattere.
Soluzione
Assicurati che l'URL sia formattato correttamente, che la richiesta di assistenza sia rispettata nel nome del carattere (ad es. Droid Serif non droid MIME), che la sintassi per il peso e gli stili sia rispettata, e la sintassi per caricare più famiglie (consulta la documentazione: Guida introduttiva - Sintassi). Quando i caratteri non vengono visualizzati, esaminando i contenuti del foglio di stile si possono ottenere ulteriori informazioni sugli errori. Copia e incolla l'URL nel tuo browser e assicurati che non venga visualizzato alcun messaggio di errore. Ad esempio, la richiesta di un peso non supportato da Droid Serif mostrerà il seguente messaggio di errore:
/* Droid Serif (style: normal, weight: 300) is not available */ /* However, style: normal, weight: normal is available */ /* However, style: italic, weight: normal is available */ /* However, style: normal, weight: bold is available */ /* However, style: italic, weight: bold is available */ /* Not supported. */
I caratteri web hanno un aspetto più spesso se utilizzati in un'intestazione
Browser: * tutti
Panoramica
I caratteri sembrano più spessi se utilizzati in un'intestazione (h1, h2 ecc.) anche se il carattere ha un peso normale (400).
Possibile causa
Il browser usa il testo in grassetto automatico.
Soluzione
Assicurati che lo spessore del carattere sia specificato correttamente nella regola CSS quando applichi un carattere a un'intestazione:
h1 {
font-family: Lobster, cursive;
font-weight: 400;
}