Dokumen ini memberikan beberapa informasi teknis tentang apa yang terjadi di balik saat Anda meminta {i>font<i} web dengan Google Fonts API.
Dokumen ini juga memberikan informasi tentang perilaku spesifik per browser.
Jika hanya ingin menggunakan Fonts API, Anda tidak perlu membaca halaman ini. Namun, membaca halaman ini dapat membantu Anda meningkatkan performa pemuatan halaman.
Apa yang dimaksud dengan Google Fonts API?
Saat browser mengirim permintaan untuk stylesheet Fonts API (seperti yang ditetapkan dalam
<link> di halaman web Anda), Fonts API menayangkan stylesheet yang dibuat untuk
agen pengguna tertentu yang
membuat permintaan.
Permintaan untuk Inconsolata dari Firefox, misalnya, menampilkan CSS berikut:
@font-face {
font-family: 'Inconsolata';
src: local('Inconsolata'), url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw') format('truetype');
}
Di sisi lain, permintaan dari Internet Explorer menampilkan:
@font-face {
font-family: 'Inconsolata';
src: url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw');
}
Setelah mengunduh CSS, browser akan mengunduh font dengan untuk browser.
Perilaku khusus browser
Bagian ini menjelaskan perilaku default setiap browser dengan font web. Perlu diketahui bahwa Anda dapat mengontrol perilaku ini menggunakan Loader Font Web.
Untuk mengetahui daftar browser yang didukung, lihat Pertanyaan Umum (FAQ).
Google Chrome
Chrome merender sisa halaman, tetapi font akan ditampilkan hingga font selesai ruang kosong sebagai pengganti teks yang menggunakan {i>font<i}.
Mozilla Firefox
Firefox terlebih dahulu menampilkan teks dalam {i>font<i} {i>default<i}, dan kemudian me-render ulang teks dengan {i>font<i} setelah dimuat. Perilaku ini dikenal sebagai "flash dari gaya teks."
Apple Safari
Safari akan merender sisa laman, tetapi sampai {i>font<i} telah dimuat, akan ditampilkan ruang kosong sebagai pengganti teks yang menggunakan {i>font<i}.
Microsoft Internet Explorer
Internet Explorer merender sisa laman, tetapi sampai font dimuat, menampilkan ruang kosong di tempat teks yang menggunakan {i>font<i}.
Secara lebih umum, perilaku Internet Explorer dapat bervariasi tergantung pada penempatan dan keberadaan berbagai elemen. Jika ingin memberikan perilaku yang konsisten di semua browser, gunakan Web Font Loader. Sebagai Anda dapat memilih untuk membuat semua browser berperilaku seperti Firefox.