Header Respons Cross-Origin Resource Sharing (CORS) tidak ada
Browser:
- Firefox (3.5+)
- Internet Explorer (9+)
- Chrome (37+)
Ringkasan
Chrome, Firefox, dan versi Internet Explorer yang lebih baru menerapkan Cross-Origin Berbagi Sumber Daya standar, dan dengan demikian hanya merender font web yang disajikan dengan {i>header<i} respons "{i>Access-Control-Allow-Origin<i}" yang sesuai. Seperti yang mungkin dilihat di domain apa pun, font diberikan dengan respons berikut {i>header<i}:
Access-Control-Allow-Origin:*
Potensi Penyebab
Beberapa proxy mungkin menghapus header dari respons, setelah itu browser tidak akan merender font.
Mendiagnosis
Dengan Chrome, periksa pesan peringatan yang relevan dalam Konsol DevTools.
Dengan Firefox, seseorang dapat menggunakan ekstensi Firebug atau {i>Live HTTP Headers<i} untuk lihat header respons untuk mengonfirmasi keberadaan header respons CORS.
Link
Font Web tidak muncul di Firefox saat plugin NoScript diinstal
Browser: * Firefox (3,5+)
Ringkasan
Firefox tidak menampilkan font web saat plugin NoScript terinstal.
Potensi Penyebab
Secara default, plugin NoScript menonaktifkan aturan @font-face.
Solusi
Buka Opsi NoScript, buka tab Embeddings dan hapus centang: Larang @wajah font
Font Web tidak muncul
Browser: * Semua
Ringkasan
Font web yang digunakan tidak muncul.
Potensi Penyebab
Ada kesalahan dalam URL API, atau gaya yang tidak didukung oleh font telah diminta.
Solusi
Pastikan URL diformat dengan benar, sehingga kasusnya dipatuhi di dari nama {i>font<i} (mis. Droid Serif not droid serif), yaitu {i>syntax<i} untuk bobot dan gaya dihormati, begitu juga sintaksis untuk memuat beberapa kelompok (lihat dokumentasi: Memulai - Sintaksis. Ketika {i>font<i} tidak muncul, melihat isi stylesheet dapat memberikan informasi lebih lanjut tentang apa yang salah. Salin dan tempel URL di dan pastikan Anda tidak melihat pesan error. Misalnya, meminta bobot tidak didukung oleh Droid Serif akan ditampilkan pesan error berikut:
/* 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. */
Font Web terlihat lebih tebal saat digunakan di judul
Browser: * Semua
Ringkasan
{i>Font<i} terlihat lebih tebal ketika digunakan dalam {i>heading<i} (h1, h2, dll.) meskipun {i>font<i} adalah berat normal (400).
Potensi Penyebab
Browser otomatis menebalkan teks.
Solusi
Pastikan bahwa ketebalan font yang benar ditentukan dalam aturan CSS Anda saat menerapkan {i>font<i} ke {i>header<i}:
h1 {
font-family: Lobster, cursive;
font-weight: 400;
}