Waktunya untuk screencast pasangan lainnya! Kali ini saya memiliki Zach Leatherman, dari Filament Group. Zach telah melakukan banyak penelitian, menulis, dan berbicara tentang pemuatan font web beberapa tahun terakhir. Dia punya panduan lengkap tentang itu!
Ada beberapa masalah dengan cara default pemuatan font kustom. Seperti, hanya menautkan font di beberapa CSS melalui @ font-face. Bahkan cara Google Fonts menyediakan Anda untuk menggunakan font mereka Zach menyebut anti-pola (pada akhirnya hanya vanilla @ font-face). Browser yang berbeda melakukan hal yang berbeda dengan @ font-face. Misalnya, beberapa versi Safari membuat jenis yang disetel dalam font khusus tidak terlihat sampai font dimuat, tetapi tidak memiliki batas waktu, jadi jika font gagal karena alasan apa pun, Anda bisa berada dalam skenario terburuk: teks yang tidak terlihat selamanya di situs.
Anda tidak memiliki banyak kendali atas bagaimana font @ font-face dimuat, kecuali jika Anda mengambil tindakan sendiri. Itu berarti hal-hal seperti: menyebariskan font, membuat subset font (baik dengan set mesin terbang "kritis", atau setidaknya mengurangi mesin terbang ke bahasa yang digunakan), menggunakan pemuat font untuk menentukan kapan font dimuat dan mengubah kelas untuk menggunakannya . Yang terakhir itu sangat menarik. Saat menggunakan kontrol atas pemuatan font, Anda tidak hanya harus berurusan dengan kapan / bagaimana browser memuat CSS yang berisi @ font-face, tetapi juga kapan / bagaimana browser menemukan elemen teks yang diperintahkan untuk menggunakan font tersebut. Font yang tidak digunakan tidak diunduh. Jadi terkadang prosedurnya adalah memaksa mereka mengunduh, menunggu mereka mengunduh, lalu menerapkan kelas untuk benar-benar menggunakannya.
Beberapa alat yang kami lihat:
- Firefox DevTools lebih baik dalam melihat font yang digunakan
- Font subsetting dapat dilakukan di generator Font Squirrel atau Font Prep.
- Mesin terbang apa yang Anda subset? Uji apa yang Anda butuhkan di URL tertentu dengan Glyphhanger.
- Bagaimana Anda tahu jika browser menggunakan huruf tebal / miring palsu? kecerobohan.