Bagaimana Cara Menemukan Nama Font Keluarga di CSS

Nama keluarga font (font family) mengidentifikasi font dalam stylesheet CSS. Karena banyak font memiliki variasi, desainer lebih memilih menggunakan nama keluarga, seperti Arial, Helvetica, atau Verdana, daripada nama spesifik seperti Arial Black atau Verdana Bold. Menemukan nama keluarga font cukup mudah: nama keluarga adalah nama yang dimiliki semua variasi font tersebut. Terdapat juga keluarga font generik, seperti sans-serif dan monospace, yang dapat disebutkan di CSS sehingga browser memilih font default dalam gaya yang dimaksud.

Langkah 1

Di taskbar, klik tombol 'Start', ketik 'fonts' pada kotak pencarian dan tekan Enter untuk membuka folder Fonts. Cari font yang ingin Anda gunakan dan catat namanya. Misalnya, Arial—font Windows yang umum—memiliki banyak variasi dan nama generik 'Arial.' Gunakan nama keluarga Arial untuk memakai font Arial generik, atau spesifik seperti Arial Narrow jika Anda memang menginginkannya. Biasanya, gunakan nama keluarga generik untuk teks utama situs dan font lebih spesifik untuk judul.

Langkah 2

Tambahkan nama keluarga generik ke stack font Anda. Stack font adalah daftar keluarga font di CSS, yang digunakan sebagai cadangan bila pengunjung tidak memiliki font utama terinstal. Gunakan nama generik 'serif' untuk stack yang dimulai dengan font serif seperti Georgia atau Times New Roman, dan 'sans-serif' untuk stack yang dimulai dengan font seperti Helvetica atau Verdana. Nama generik lainnya meliputi 'monospace', 'cursive', dan 'fantasy.' Catatan: nama keluarga generik tidak relevan ketika Anda menanam font menggunakan @font-face.

Tambahkan tanda kutip pada nama keluarga font yang terdiri lebih dari satu kata. Nama font satu kata seperti Arial atau Georgia tidak memerlukan kutip. Anda dapat memakai kutip tunggal atau ganda, namun hati-hati saat mencampur tipe kutip agar tidak menimbulkan error. Berikut contoh penamaan font di CSS:

body { font-family: 'Helvetica Neue', Arial, sans-serif; }

Stack di atas memberi tahu browser untuk mencocokkan 'Helvetica Neue' terlebih dahulu. Desainer memilihnya karena font ini tidak tersedia di komputer Windows, yang menampilkan Helvetica biasa secara kurang bagus. Pengguna Windows akan melihat Arial, sementara pengguna lain akan melihat font sans-serif default sesuai pengaturan browser.

Tip

• Beberapa desainer terkenal, seperti Paul Irish dan Chris Coyier, sekarang menyarankan untuk tidak lagi menggunakan stack font melainkan hanya menyebutkan keluarga font generik, khususnya untuk stack umum seperti Helvetica, Arial, dan sans-serif. Hal ini menghormati pengaturan pengguna dan menghemat waktu desainer karena kebanyakan browser sudah otomatis memilih font tersebut.