Saat bikin website, yang namanya desainer/developer/klien itu kadang ingin tampilan yang semenarik mungkin dan memaksakan kehendak untuk pakai font-font yang keren.

Namun ketahuilah hai para pujangga, semakin banyak font yang kalian pakai, pasti akan pengaruhi performa website!

Nah, artikel ini akan bahas beberapa metode optimasi font yang sebetulnya bisa kamu terapkan dengan mudah.

Pakai Saja Sistem Font

Sistem font itu adalah font yang ada di OS-nya pengunjung.

Jadi browser itu gak perlu buat ekstra http request untuk download css ataupun font.

Website-website besarpun juga pakai sistem font kok, contoh: WordPress.com dan Github. Ini dia yang tertulis di page-source website mereka:

/* System Fonts as used by GitHub */
body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
}
/* System Fonts as used by WordPress */
body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;
}

Memang sih sistem font itu bikin tampilan website jadi seperti kebanyakan. Tapi kalau mau yang paling ringan, pilih sistem font!

Batasi Jumlah Font dan Weight-nya

Ini menjadi teknik optimasi terpenting yang kedua. Jika kamu memilih untuk tidak memakai sistem font, idealnya adalah jangan menggunakan lebih dari 2 font families di website Anda (maksimal 3).

Karena nantinya setiap font family tersebut akan memiliki variasi weight-nya sendiri-sendiri. Dari 100 sampai dengan 900. Yang masing-masing tentu akan perlu didownload oleh browser. Jadi batasi font families & weights yang kamu gunakan.

Dan jika kamu memilih menggunakan Google Font (dengan cara embed), pilihlah font family dan weight yang benar-benar akan dipakai di dalam website.

Host Sendiri Google Font

Untuk kamu yang sering meggunakan Google Font, usahakan untuk selalu host sendiri Google Font kamu itu (jangan embed). Karena mengembed Google Font akan membuat ekstra http request kepada browser. Pertama, browser akan mendownload file css dari “fonts.googleapis.com”, kemudian browser akan mendownload file font yang disebut di dalam file css tersebut dari “fonts.gstatic.com”.

Bahkan, Google sendiri pun menyarankan untuk hosting sendiri Google Font Anda demi kontrol yang lebih baik:

Kesimpulan

Optimasi font adalah hal perlu kamu lakukan supaya web kamu ringan dan optimal. Untungnya, beberapa Theme yang cukup populer semisal Kadence sudah menyediakan fitur Load Google Fonts locally dan fitur lainnya, yang saya tulis di artikel sini, untuk kebutuhan optimasi yang kita bahas di atas tadi.

Leave a Reply

Your email address will not be published. Required fields are marked *