Dokumen ini memberikan beberapa informasi teknis mengenai apa yang terjadi di balik layar saat Anda meminta font web dengan Google Fonts API.
Dokumen ini juga memberikan informasi tentang perilaku spesifik browser.
Jika hanya ingin menggunakan Fonts API, Anda tidak perlu membaca halaman ini. Namun, membaca halaman ini dapat membantu meningkatkan performa pemuatan halaman.
Apa yang disediakan oleh Google Fonts API?
Saat browser mengirim permintaan untuk stylesheet Fonts API (seperti yang ditentukan dalam
tag <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');
}
Permintaan dari Internet Explorer, di sisi lain, menampilkan:
@font-face {
font-family: 'Inconsolata';
src: url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw');
}
Setelah mendownload CSS, browser akan mendownload font dalam format yang sesuai untuk browser.
Perilaku khusus browser
Bagian ini menjelaskan perilaku default setiap font dengan font web. Perhatikan bahwa Anda dapat mengontrol perilaku ini menggunakan Web Font Loader.
Untuk mengetahui daftar browser yang didukung, lihat FAQ.
Google Chrome
Chrome akan merender sisa halaman, tetapi hingga font dimuat, menampilkan ruang kosong sebagai pengganti teks yang menggunakan font.
Mozilla Firefox
Firefox akan menampilkan teks dalam font default terlebih dahulu, lalu merender ulang teks dalam font setelah dimuat. Perilaku ini dikenal sebagai "flash dari teks yang tidak bergaya."
Apple Safari
Safari akan merender halaman lainnya, tetapi hingga font dimuat, ruang kosong akan ditampilkan sebagai pengganti teks yang menggunakan font.
Microsoft Internet Explorer
Internet Explorer akan merender seluruh halaman, tetapi hingga font dimuat, ruang kosong akan ditampilkan sebagai pengganti teks yang menggunakan font.
Secara lebih umum, perilaku Internet Explorer dapat bervariasi bergantung pada penempatan dan keberadaan berbagai elemen. Jika Anda ingin memberikan perilaku yang konsisten di semua browser, gunakan Web Font Loader. Misalnya, Anda dapat memilih untuk membuat semua browser berperilaku seperti Firefox.