Pengoptimalan Font Google adalah sebagian besar konten di sebagian besar situs, dan penting untuk melakukannya dengan benar. Pada artikel ini, kami akan menganalisis poin-poin dasar mengenai penyertaan dan pengoptimalan font.
Opsi termudah Pengoptimalan Font Google adalah tidak menghubungkan font pihak ketiga sama sekali dan menggunakan font standar. Ini adalah Arial yang terkenal, Times New Roman, dan seterusnya. Font ini disebut web safe, cukup tentukan nama salah satu font ini dalam kode dan semuanya akan berfungsi.
Apa Pentingnya Pengoptimalan Font Google dalam Teknologi Web?
Desain tata letak tidak memungkinkan Anda bertahan dengan font yang aman untuk web, tetapi mengharuskan Anda untuk menggunakan semacam font non-standar. Maka file font harus dimuat dari server dengan cara yang sama seperti sumber daya lainnya seperti file CSS, gambar, dan sebagainya.
Ukurannya bisa sangat besar, jadi sebaiknya pertimbangkan untuk menggunakan font standar terlebih dahulu untuk memuat halaman dengan cepat. Tetapi bahkan dengan font non-standar, sebagian besar masalah dapat dihindari jika Anda memperhatikan Pengoptimalan Font Google.
Apa Langkah Pengoptimalan Font Google?
1. Langkah pertama adalah memilih format font yang tepat
TTF dan OTF adalah format yang disediakan dengan kompresi minimal atau tanpa kompresi. Mereka hanya boleh digunakan jika Anda memerlukan dukungan untuk browser yang sangat lama.
Dalam semua situasi lain, Anda dapat memilih WOFF dan WOFF2 yaitu format yang sangat terkompresi. WOFF2 adalah versi perbaikan dari pendahulunya, format ini dapat dianggap yang terbaik dari yang sudah ada.
Namun demikian, dukungan WOFF2 , meskipun sangat baik, belum mutlak, sehingga WOFF harus digunakan sebagai jaring pengaman untuk browser yang tidak paling modern.
2. Menghubungkan font dengan Google Font
Ada cara mudah dan nyaman untuk menyertakan font khusus yaitu gunakan Google Font. Pengoptimalan Font Google adalah layanan gratis yang memungkinkan Anda menghubungkan font, tetapi tidak menyimpannya di server Anda
Untuk menggunakan Pengoptimalan Font Google, Anda perlu memilih font dan menambahkan satu atau lebih gaya yang diinginkan, lalu menempelkannya ke (head) tautan yang akan dihasilkan Google Font di tab Sematkan.
Perlu dicatat bahwa setelah font utama, penting untuk menunjukkan keamanan web. Jika font non-standar tidak dimuat, browser akan menggunakan font alternatif. Itu harus dipilih semirip mungkin dengan font utama.
Kelebihan dari metode Pengoptimalan Font Google ini adalah kemudahan penggunaan dan versi font yang selalu up-to-date, Google Fonts sering mengupdatenya. Tetapi juga memiliki kekurangan seperti permintaan ke server pihak ketiga dapat berdampak negatif pada kecepatan pemuatan halaman. Jika Anda memilih metode ini, Anda harus memperhatikan pengoptimalan.
3. Menghubungkan font dengan @font-face
Ada cara alternatif di mana file font disimpan bersama dengan sumber daya situs lainnya. Biasanya mereka memiliki direktori terpisah di root proyek. Pengoptimalan Font Google harus berisi file untuk setiap gaya dalam format yang diperlukan.
4. FOIT, FOUT dan FOFT
Saat Pengoptimalan Font Google sedang dimuat, perilaku teks yang berbeda dapat diamati selama rendering.
a. FOIT (Flash of Invisible Text)
Dengan perilaku ini, hingga font dimuat, teks tidak ditampilkan dan hanya muncul setelah font dimuat. Masalah yang signifikan adalah tidak ada akses ke konten teks selama pengunduhan.
b. FOUT (Flash of Unstyled Text)
Selama pemuatan, font default digunakan (font sistem, misalnya), dan setelah pemuatan, halaman digambar ulang menggunakan font yang dimuat. Penggambaran ulang ini cukup terlihat dan mungkin tidak diinginkan.
c. FOFT (Flash of Faux Text)
Perilaku ini dapat diamati pada interval ketika wajah utama telah dimuat, tetapi wajah tambahan (tebal, miring, dan sebagainya) belum. Browser meniru gaya yang diinginkan sebelum mengunduh versi aslinya. Dalam hal ini, halaman dapat digambar ulang beberapa kali saat wajah dimuat.
Properti Tampilan Pengoptimalan Font Google
Properti tampilan Pengoptimalan Font Google memiliki beberapa nilai yang menentukan bagaimana teks berperilaku saat font dimuat:
1. Auto
Perilaku default, tergantung pada browser.
2. Block
Teks tidak ditampilkan untuk waktu yang singkat (3 detik), maka font mundur digambar jika yang utama belum dimuat. Segera setelah unduhan selesai, teks digambar ulang lagi.
3. Swap
Font fallback segera dirender, setelah memuat font – rendering ulang.
4. Fallback
Untuk waktu yang sangat singkat (100 milidetik) tidak ada yang ditampilkan, maka browser menggunakan font fallback dan menunggu 3 detik. Jika font masih belum dimuat, font fallback tetap ada. Selanjutnya, tidak masalah apakah font dimuat atau tidak, penggantian tidak akan terjadi. Jika font dimuat, itu hanya akan diterapkan saat halaman di-refresh.
5. Optional
Teks tidak ditampilkan selama 100 milidetik, dan kemudian digambar dalam font mundur. Bahkan jika font dimuat setelah itu, penggantian hanya akan terjadi ketika halaman di-refresh. Nilai optimalnya adalah swap, dapat digunakan dalam banyak kasus, nyaman bagi pengguna.
Saat menghubungkan font menggunakan Google Font, nilai ini ditetapkan secara default. Jika ada kebutuhan untuk menghindari kedipan teks (misalnya, untuk membaca yang bijaksana), itu akan dilakukan optional. Itulah ulasan mengenai Pentingnya Pengoptimalan Font Google dalam Teknologi Web, sekian dan terimakasih.
