Cara Melihat Font Apa yang Digunakan Situs Web

Jika Anda pernah benar-benar tertarik dengan font yang Anda lihat di situs web, Anda mungkin bertanya-tanya bagaimana menemukan apa namanya sehingga Anda dapat menggunakannya dalam konten Anda sendiri. Tipografi berkualitas dapat meningkatkan pengalaman membaca pengunjung Anda, jadi mungkin perlu berusaha untuk menemukannya. Terlepas dari alasan Anda memeriksa font apa yang digunakan di situs web, ada banyak alat yang dapat membantu.

Dalam artikel ini, kami akan membahas mengapa Anda mungkin ingin melihat font apa yang digunakan situs web. Kami juga akan menunjukkan cara melakukannya.

Mari kita mulai!

Berlangganan Saluran Youtube Kami

Mengapa Anda Mungkin Ingin Memeriksa Font Apa yang Digunakan Situs Web

Seperti yang telah kami sebutkan, font yang indah dan mudah dibaca dapat meningkatkan Pengalaman Pengguna (UX) dan keterbacaan situs Anda. Ini juga memastikan bahwa pengunjung dapat dengan nyaman terlibat dengan konten Anda tanpa kesulitan untuk menguraikannya. Jika teks Anda bergaya tetapi tidak terbaca, pembaca akan kesulitan memahami atau menghargai materi Anda.

Tombol Ajakan Bertindak (CTA) juga bisa menjadi tidak berguna jika teksnya tidak dapat dibaca. Inilah sebabnya mengapa Anda mungkin merasa berguna untuk menyimpan daftar font yang menarik perhatian Anda karena gaya dan dapat dibaca. Anda kemudian dapat menggunakannya di situs Anda atau untuk klien di masa mendatang.

Cara Melihat Font Apa yang Digunakan Situs Web (3 Metode yang Tersedia)

Ada beberapa metode yang dapat Anda gunakan untuk memeriksa font apa yang digunakan situs web. Fitur inspeksi browser Anda adalah solusi masuk yang sangat baik, tetapi ada ekstensi yang dapat menghasilkan efek yang setara. Anda bahkan dapat menemukan font dari gambar menggunakan alat online. Mari kita lihat masing-masing opsi ini.

1. Identifikasi Font Menggunakan Alat Inspektur Browser

Salah satu cara termudah untuk memeriksa font apa yang digunakan situs web adalah dengan alat pemeriksa browser Anda. Meskipun kami akan bekerja dengan Chrome Inspector dalam contoh ini, perlu dicatat bahwa browser lain memiliki fitur yang setara.

Pertama, klik kanan pada halaman web yang berisi font yang ingin Anda temukan. Dari menu yang dihasilkan, pilih Inspect:

Jika Anda lebih suka menggunakan pintasan keyboard, coba Ctrl+Shift+I untuk Windows atau Linux. Jika Anda menggunakan Mac, yang setara adalah Cmd+Shift+I.

Di jendela di sisi kanan layar, cari teks menggunakan font yang ingin Anda periksa. Ini akan disorot ketika Anda memilih elemen HTML yang sesuai:

Selanjutnya, klik pada tab Computed dan cari "font-family":

Anda akan melihat nama font dan gayanya tercantum di sini.

Untuk melihat CSS yang terkait dengan font, lihat di bawah tab Styles . Anda dapat menggulir untuk mencari nilai terkait font. Namun, karena mungkin ada penggantian dan aturan gaya yang tidak relevan di sini, tab Computed biasanya lebih membantu.

2. Temukan Font Melalui Ekstensi Browser

Ekstensi browser dapat memberikan cara yang lebih mudah untuk menemukan detail font di situs web, terutama jika Anda tidak nyaman dengan Inspector. Plus, mereka biasanya dapat memberikan jawaban yang Anda cari lebih cepat sehingga Anda dapat kembali ke tugas yang ada.

Beberapa add-on tersebut meliputi:

• Fontanello: Gratis untuk digunakan, ekstensi ini memungkinkan Anda menemukan nama font, berat, gaya, dan lainnya hanya dengan menyorot dan mengklik kanan saat Anda menjelajah.
• WhatFont: Mempersingkat deteksi font lebih jauh, WhatFont memungkinkan Anda untuk melihat nama jenis huruf hanya dengan mengarahkan kursor ke atasnya.
• CSS Peeper: Dibuat dengan mempertimbangkan desainer web, ekstensi ini sedikit lebih kuat dan dapat memberi tahu Anda detail tambahan dari kode CSS halaman web.

Namun, masing-masing ekstensi tersebut memiliki dukungan browser yang bervariasi. WhatFont tersedia untuk Firefox, Chrome, Safari, dan Internet Explorer. Fontanello, di sisi lain, hanya tersedia untuk Firefox dan Chrome. CSS Peeper adalah alat khusus Chrome yang tidak dapat Anda gunakan dengan platform lain.

Untuk tujuan menemukan nama font tertentu dengan cepat, WhatFont adalah opsi termudah untuk digunakan. Karena itu juga memiliki dukungan untuk sebagian besar browser, kami akan menggunakannya untuk demonstrasi cepat.

Setelah Anda menginstal WhatFont, Anda dapat memeriksa font apa yang digunakan situs web dengan mengaktifkannya di bilah alat browser Anda dan mengarahkan kursor ke beberapa teks:

Saat pertama kali mengarahkan kursor ke teks, Anda hanya akan melihat nama font. Namun, mengklik nama akan menampilkan popup yang diperluas dengan detail lebih lanjut seperti ukuran, berat, warna, dan tinggi garis. Itu juga dapat mengidentifikasi apakah jenis huruf tersedia melalui Typekit atau Google Font.

Setelah selesai memeriksa detail font, Anda dapat keluar dari alat menggunakan tombol Keluar dari WhatFont di sudut kanan atas jendela browser Anda.

3. Deteksi Font di Gambar

Terakhir, Anda juga dapat mencoba melihat font yang digunakan dalam gambar. Ini termasuk tipografi yang Anda lihat di logo atau infografis. Dalam pengalaman kami dengan pendeteksi font, WhatTheFont adalah alat online paling efektif untuk pekerjaan ini.

Untuk menggunakan WhatTheFont, Anda harus mengunggah gambar yang dimaksud dan memilih bagian dengan font yang relevan:

Ini kemudian akan mengembalikan halaman hasil dengan beberapa font yang mirip, jika tidak sama persis, dengan yang Anda coba identifikasi:

Tingkat keberhasilan Anda di sini dapat bervariasi tergantung pada sumber dan popularitas font. Jika nama yang tepat dari jenis huruf sangat penting bagi Anda, mungkin sulit untuk menemukan alat yang akan memberikan apa yang Anda inginkan.

Namun, jika Anda terbuka untuk menggunakan font yang mirip dengan yang Anda temukan di gambar, detektor online harus sesuai dengan kebutuhan Anda.

Kesimpulan

Font yang menarik secara visual dan dapat dibaca dapat meningkatkan pengalaman membaca bagi pengunjung situs web Anda. Ini mungkin mendorong Anda untuk tetap mencari tipografi baru yang dapat Anda gunakan baik di situs Anda atau untuk klien Anda. Terlepas dari alasan Anda ingin memeriksa font apa yang digunakan situs web, ada banyak alat yang dapat membantu Anda.

Dalam posting ini, kami membahas tiga metode untuk melihat font apa yang digunakan situs web:

1. Identifikasi font menggunakan alat pemeriksa browser Anda.
2. Temukan font menggunakan ekstensi browser seperti WhatFont.
3. Deteksi font dalam gambar menggunakan WhatTheFont.

Apakah Anda memiliki pertanyaan tentang cara memeriksa font apa yang digunakan di situs web? Beri tahu kami di bagian komentar di bawah!

Gambar oleh rudall30 / shutterstock.com