Intestazione della risposta di condivisione delle risorse tra origini (CORS) mancante
Browser:
- Firefox (3.5 e versioni successive)
- Internet Explorer (9 e versioni successive)
- Chrome (37+)
Panoramica
Chrome, Firefox e le versioni più recenti di Internet Explorer applicano la migrazione multiorigine di condivisione delle risorse, quindi visualizza solo i caratteri web pubblicati con l'intestazione della risposta "Access-Control-Allow-Origin" appropriata. Poiché Google Fonts potrebbe essere visualizzati su qualsiasi dominio, i caratteri vengono pubblicati con la seguente risposta intestazione:
Access-Control-Allow-Origin:*
Possibile causa
Alcuni proxy potrebbero rimuovere l'intestazione dalla risposta, dopodiché il browser i caratteri non vengono visualizzati.
Diagnosi in corso
Con Chrome, verifica la presenza del messaggio di avviso pertinente nella Console DevTools.
Con Firefox, è possibile utilizzare le estensioni Firebug o Live HTTP Headers per visualizza le intestazioni della risposta per confermare la presenza dell'intestazione della risposta CORS.
Link
I caratteri web non vengono visualizzati su Firefox se il plug-in NoScript è installato
Browser: * Firefox (3.5 e versioni successive)
Panoramica
Firefox non visualizza i caratteri web se è 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 Embeddings 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 uno stile non supportato dal carattere un'istanza di blocco note.
Soluzione
Assicurati che l'URL sia formattato correttamente e che le maiuscole e le minuscole vengano rispettate nella nome del font (ad es. Droid Serif non droid Serif), che la sintassi per i pesi gli stili e la sintassi per caricare più famiglie (vedi il documentazione: Guida introduttiva - Sintassi. Quando i caratteri non vengono visualizzati, guardando i contenuti del foglio di stile si può maggiori informazioni sugli errori. Copia e incolla l'URL nel browser e accertati che non ci siano messaggi di errore. Ad esempio, la richiesta di un peso non supportato da Droid Serif verrà visualizzato 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 appaiono più spessi se utilizzati in un titolo
Browser: * Tutti
Panoramica
I caratteri appaiono più spessi se utilizzati in un'intestazione (h1, h2, ecc.) anche se è un peso normale (400).
Possibile causa
Il browser ha applicato automaticamente il grassetto al testo.
Soluzione
Assicurati che nella regola CSS sia specificato lo spessore del carattere corretto quando l'applicazione di un carattere a un'intestazione:
h1 {
font-family: Lobster, cursive;
font-weight: 400;
}