Cara Mudah Mengetahui Nama Font yang Digunakan pada Halaman Web

Tips ini khusus untuk pengguna web browser (peramban) Google Chrome. TermasukChromium. Namun jika Anda bukan pengguna browser tersebut, Anda bisa menggunakan cara manual (yang tentu saja lebih rumit dan agak memakan waktu). Kecuali jika di browser yang Anda gunakan sudah tersedia pengaya/ekstensi untuk mengecek nama font secara cepat.

Nah, di browser Chrome/Chromium sudah tersedia ekstensi yang berfungsi untuk mempermudah kita dalam mengetahui nama font yang digunakan pada sebuah halaman website. Kita tinggal menginstall ekstensi tersebut (yang bernama WhatFont) melalui Chrome Web Store. Caranya sangat mudah, yaitu:

1. Kunjungi halaman ekstensi WhatFont di ‘Chrome Web Store’ seperti yang terlihat di bawah ini (klik gambarnya via ‘open new tab’). Jika Anda tidak menemukan halaman tersebut, silakan klik hasil pencarian ekstensi WhatFont.
   
2. Klik tombol  .
3. Pada kotak ‘pop-up’ yang muncul kemudian, klik , lalu tunggulah proses installasi selesai. Jika installasi berhasil, akan muncul keterangan khusus dan setelah itu halaman akan ter-refresh secara otomatis. Tanda ekstensi WhatFont sudah terinstall yaitu munculnya icon kecil berwujud huruf f miring disertai tanda tanya (f?) di sisi kanan atas browser Chrome, tepatnya di sebelah kanan bilah alamat (address-bar). Seperti terlihat pada gambar berikut.
   

Cara menggunakan ekstensi WhatFont & studi kasus

Untuk mengetahui nama font yang terdapat pada halaman web yang sedang Anda buka, klik icon ekstensi WhatFont (seperti pada gambar ke-2 di atas), lalu arahkan/geser pointerke atas area/lokasi font yang ingin Anda ketahui namanya.

Misalnya saya ingin mengetahui nama font yang digunakan pada judul postingan ‘Ketika Sepasang Mata Membaca Majalah‘ (di blog discrimate.tk), maka hasilnya akan terlihat seperti screenshot di bawah ini.

Ya, ketahuan deh nama font-nya (yaitu GoudyThirty-Demibold – yang notabene merupakan ‘embedded font’ – alias font yang dipanggil dari sumber luar via url & trik CSS3 berupa @font-face).

Jadi, ekstensi WhatFont ternyata sudah mampu mengenali/memindai secara tepat jenis font yang tergolong ‘embedded font’. Ketika saya cek pada ‘source-code’, terutama bagian ID/class CSS yang mengatur font-family pada judul postingan tersebut, ternyata nama font yang digunakan memang ‘GoudyThirty-Demibold’.

Mari kita cek lagi pada font yang saya gunakan di postingan tentang Halaman Web Tanpa Navigasi, terutama pada bagian tubuh posting. Hasilnya bisa dilihat pada gambar berikut.

Ya, ternyata font yang digunakan bernama Constantia. Itu memang benar karena saya memang menyetting font-family untuk paragraf tersebut dengan font ‘Constantia’. Jika Sistem Operasi pada komputer Anda ternyata tidak/belum terinstall font Constantia, maka keterangan yang tampil pada ‘tooltip’ di atas akan menyesuaikan dengan urutan settinganfont-stack pada kode CSS yang mengaturnya.

Mekanismenya, nama font yang dikenali/dimunculkan oleh ekstensi WhatFont akan selalu mengacu pada urutan nama font yang disetting pada kode CSS elemen yang bersangkutan.

Dalam hal ini, jika saya menyetting kode CSS pada body dengan urutan font berikut:

body {font-family: Constantia,Georgia,serif}

maka ekstensi WhatFont akan menampilkan keterangan font (pada ‘tooltip’) berupa ‘Constantia’ (terutama jika di komputer pengguna sudah terinstall font tersebut). Namun jika ternyata di komputer (OS) pengguna masih belum terinstall font Constantia, maka ekstensi WhatFont akan menampilkan/mengenali nama font-nya sebagai Georgia.

Lalu, jika ternyata di OS komputer pengguna juga tidak terinstall font Georgia, maka ekstensi WhatFont akan menampilkan/mengenali nama font-nya sebagai ‘serif’ (sesuai setting pada kode CSS font-family di atas).

Nah, bagaimana jika kode CSS font-family hanya berupa:

body/nama elemen {font-family: Constantia,Georgia}

???

Pertanyaan yang bagus. Pada kasus tersebut, jika ternyata kedua font yang disetting tidak terinstall pada OS komputer pengguna/pengecek, maka ekstensi WhatFont akan menampilkan keterangan berupa default-font. Artinya, teks yang ditampilkan pada web browser adalah berupa teks dalam format font standar/’default’ sesuai settingan browser pengguna.

Kesimpulan

Jadi pada intinya, keterangan nama font yang dimunculkan oleh ekstensi WhatFont akan menyesuaikan dengan:

• settingan kode CSS pada website yang dibuka,
• hasil rendering (penguraian) browser pengguna,
• serta (tentu saja) kondisi font-font yang sudah terinstall pada Sistem Operasi komputer pengguna.

OK, sekarang saya asumsikan Anda sudah menginstall ekstensi WhatFont pada Chrome/Chromium Anda. Nah, coba tes/gunakan ekstensi tersebut untuk mengecek/mengetahui nama font pada paragraf postingan yang sedang Anda baca saat ini. Apa nama font-nya?

Selamat mencoba.

http://kafegue.com/cara-mudah-mengetahui-nama-font-yang-digunakan-pada-halaman-web/