Header Respons Cross-Origin Resource Sharing (CORS) yang Hilang
Browser:
- Firefox (3,5+)
- Internet Explorer (9+)
- Chrome (37+)
Ringkasan
Chrome, Firefox, dan versi Internet Explorer yang lebih baru menerapkan standar Berbagi Resource Lintas Asal, sehingga hanya merender font web yang ditayangkan dengan header respons "Access-Control-Allow-Origin" yang sesuai. Karena Google Font dapat dilihat di domain mana pun, font tersebut ditayangkan dengan header respons berikut:
Access-Control-Allow-Origin:*
Kemungkinan Penyebab
Beberapa proxy dapat menghapus header dari respons, kemudian browser tidak akan merender font.
Mendiagnosis
Dengan Chrome, periksa pesan peringatan yang relevan di konsol DevTools.
Dengan Firefox, pengguna dapat menggunakan ekstensi VideoObject atau Live HTTP Headers untuk melihat 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 diinstal.
Kemungkinan Penyebab
Secara default, plugin NoScript menonaktifkan aturan @font-face.
Solusi
Buka Opsi NoScript, buka tab Embeddings dan hapus centang: Forbid @font-face
Font Web tidak muncul
Browser: * Semua
Ringkasan
Font web yang digunakan tidak muncul.
Kemungkinan Penyebab
Ada kesalahan dalam URL API, atau gaya yang tidak didukung oleh font telah diminta.
Solusi
Pastikan format URL sudah benar, bahwa huruf besar/kecil diikuti dengan nama font (misalnya Droid Serif bukan droid serif), bahwa sintaksis untuk bobot dan gaya dipatuhi serta sintaksis untuk memuat beberapa kelompok (lihat dokumentasi: Memulai - Sintaksis. Ketika font tidak muncul, melihat konten stylesheet dapat memberikan informasi selengkapnya tentang apa yang salah. Salin dan tempel URL di browser dan pastikan Anda tidak melihat pesan error. Misalnya, meminta bobot yang tidak didukung oleh Droid Serif akan menampilkan 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
Font terlihat lebih tebal saat digunakan di heading (h1, h2, dll) meskipun font memiliki bobot normal (400).
Kemungkinan Penyebab
Browser akan otomatis membuat teks tebal.
Solusi
Pastikan ketebalan font yang benar ditentukan dalam aturan CSS Anda saat menerapkan font ke header:
h1 {
font-family: Lobster, cursive;
font-weight: 400;
}