opt-font-bg-img

Terkadang dalam membangun sebuah website, para desainer/developer/klien menginginkan tampilan yang menarik dan memakai font-font yang disukainya.

Namun tentunya pemilihan tipe dan jumlah font yang dipakai akan sangat mempengaruhi performa web itu sendiri.

Nah, artikel ini akan membahas beberapa cara dasar yang dapat Anda lakukan untuk mengoptimasi font dalam WordPress.

Pilihlah sistem font

Sistem font merupakan font yang sudah ada di OS-nya pengunjung.

Sehingga browser pengunjung tidak perlu lagi melakukan ekstra http request khusus sekedar untuk mendownload file css ataupun font.

Beberapa website besar sekalipun semisal wordpress.com dan Github pun memilih untuk memakai sistem font di 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 seolah terbatas pilihannya, namun jika kamu mencari yang paling ringan, pilihlah sistem font!

Batasi penggunaan Font Families dan Weights

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-fitur untuk kebutuhan optimasi yang kita bahas di atas tadi.