Dalam CSS, font family merujuk pada kumpulan font yang dikelompokkan berdasarkan karakteristik desainnya. Setiap font dalam family ini memiliki style dan bobot tertentu, mulai dari regular, bold, italic, sampai berbagai variasi lain.

Bagi web developer, memilih jenis huruf yang sesuai bukan hanya soal estetika, tetapi juga tentang keterbacaan dan aksesibilitas. Font yang tepat dapat meningkatkan keterbacaan teks, membuat konten lebih mudah diakses, dan meningkatkan keseluruhan user experience di website.

Sebaliknya, pemilihan font yang kurang tepat menyulitkan pengunjung untuk memahami informasi yang disajikan, bahkan mungkin membuat mereka meninggalkan website. Oleh karena itu, penting untuk memahami CSS font family dan bagaimana menggunakannya secara efektif. Selamat membaca!

Jenis Font Family

Dalam CSS, ada dua jenis utama font family:

Generic family

Generic family merujuk pada kategori font yang memiliki karakteristik desain serupa. Beberapa contohnya termasuk:

• Serif: font ini memiliki garis kecil atau goresan di akhir setiap karakter. Contohnya adalah Times New Roman dan Georgia. Serif sering digunakan untuk buku yang dicetak tradisional (hard file).
• Sans-Serif: Sans-Serif tidak memiliki garis atau goresan di akhir karakter, contohnya adalah Helvetica dan Arial. Font ini dianggap bersih dan modern, sering digunakan dalam konten online.
• Monospace: dalam Monospace, semua karakter memiliki jarak yang sama. Seperti Courier dan Consolas, font ini sering digunakan dalam coding karena mudah dibaca.
• Cursive: Cursive meniru tulisan tangan dengan sambungan antar karakter, contohnya adalah Handwriting dan Segoe Script. Jenis ini biasanya digunakan untuk tujuan dekoratif.
• Fantasy: Fantasy juga merupakan font dekoratif yang diterapkan untuk desain kreatif atau kebutuhan informal. Contoh font-nya adalah Papyrus dan Harrington.

Specific family

Specific family dalam CSS merujuk pada kumpulan font yang memiliki nama spesifik dan desain unik.

Berbeda dengan generic family yang menggambarkan kategori umum, specific family menargetkan font tertentu dengan nama tertentu.

Contoh dari jenis font ini adalah Verdana, Georgia, Comic Sans MS, Trebuchet MS, dan lainnya.

Ketika kamu menentukan font khusus dalam CSS, kamu sebenarnya meminta browser untuk merender teks dengan font tersebut. Namun, jika font tidak tersedia atau tidak diinstal pada sistem, browser akan secara default berubah ke font lain yang ditentukan sebagai cadangan atau font default browser.

CSS Font Family List

Ada beberapa font yang telah dikenal sebagai "web-safe". Artinya, font akan tampil dengan baik dan konsisten di hampir semua perangkat. Berikut list beberapa font family CSS yang aman digunakan:

Cara Mengatur Font Family

Berikut cara mengatur font family dalam CSS:

#1 Gunakan properti font-family

Properti font-family digunakan untuk menentukan jenis font yang ingin kamu gunakan.

Kamu sebaiknya menentukan beberapa font termasuk lima font family default (Serif, Sans-serif, Monospace, Cursive, dan Fantasy) sebagai sistem "fallback".

Dengan cara ini, jika browser tidak mendukung font pertama, browser akan mencoba font pilihan kedua, dan seterusnya, sampai mencapai salah satu dari lima font family default, memastikan teks dapat dibaca di semua browser.

Contoh:

Di sini, browser mencoba menampilkan teks dalam paragraf dengan "Times New Roman". Jika tidak tersedia, browser akan mencoba "Times", dan akhirnya default ke generic font "serif".

Pilihlah setidaknya satu generic font dalam list kamu, seperti Serif, Sans-serif, atau Monospace.

#2 Gunakan font dengan spasi

Jika nama font yang kamu pilih memiliki spasi, pastikan untuk mengapitnya dengan tanda kutip ganda.

Contoh:

#3 Gunakan font dari layanan eksternal

Kamu juga dapat menggunakan font dari layanan eksternal seperti Google Fonts. Cukup tambahkan link ke font yang kamu inginkan di bagian < head > dari HTML, lalu gunakan nama font tersebut dalam CSS milikmu.

Selain itu, kamu juga memiliki opsi untuk mengimpor font secara lokal. Dengan cara ini, font disimpan di server atau perangkat pribadi, memungkinkan akses yang lebih cepat dan mengurangi ketergantungan pada layanan eksternal. 

Contoh kode HTML:

Contoh kode CSS:

FAQ (Frequently Asked Question)

Apakah semua font tersedia di semua browser?

Tidak semua font didukung di setiap browser. Itulah mengapa penting untuk menyediakan beberapa font dalam properti font-family sebagai sistem "fallback".

Untuk mengetahui apakah font didukung oleh browser, kamu dapat menggunakan alat seperti Can I use dan periksa dukungan browser untuk font tertentu atau fitur CSS lainnya.

Bagaimana cara mengoptimalkan loading speed font eksternal?

Pastikan kamu memilih style font yang benar-benar dibutuhkan. Jika perlu, gunakan fitur preload dan pertimbangkan untuk mengunduh font serta menjalankannya dari server sendiri agar mengurangi permintaan eksternal.

Perlu diingat untuk menggunakan font external seperlunya karena akan mempengaruhi speed load website, baik menggunakan Google Fonts maupun Local Fonts.

Penutup

Font family dalam CSS merupakan salah satu aspek krusial dalam web design yang memengaruhi bagaimana konten disajikan kepada pengunjung situs. Dengan beragam pilihan yang tersedia, pemilihan font yang tepat mampu meningkatkan keterbacaan, estetika, dan kesan profesional dari sebuah website.

Mengatur font family dengan tepat dalam kode CSS juga memungkinkan kita untuk mengendalikan tampilan dan nuansa situs secara presisi. Selain itu, memahami daftar font yang aman untuk web memastikan tampilan situs kamu konsisten di berbagai perangkat dan browser.