Cara Melihat Font yang Digunakan Situs Web

Font dan tipografi merupakan aspek mendasar dari desain situs web. Jika Anda tertarik untuk mencari tahu font apa yang digunakan situs web, ada beberapa metode untuk melakukannya. Mungkin Anda telah menemukan salah satu yang ingin Anda gunakan dalam proyek Anda sendiri – panduan ini akan menunjukkan kepada Anda bagaimana mengidentifikasi font itu!

Gunakan Alat Pemeriksaan Browser Chrome

Karena browser chrome adalah browser yang paling populer digunakan pada tahun 2022, mari kita mulai dari sini. Arahkan kursor ke font yang ingin Anda identifikasi dan klik kanan. Pilih periksa. Ini akan mengaktifkan panel yang akan menunjukkan kepada Anda semua kode, CSS, dan fitur tambahan yang digunakan untuk membuat situs web ini.

Di bawah semua kode HTML adalah tab gaya. Ini menunjukkan CSS mana yang berlaku untuk HTML yang dipilih. Karena kita menulis mengklik teks yang ingin kita identifikasi, HTML yang mendasarinya sudah dipilih.

Dengan CSS, properti font-family digunakan untuk menerapkan font tertentu ke teks. Oleh karena itu, kita dapat menggunakan ini untuk memahami font mana yang diterapkan ke elemen tertentu pada halaman.

Gunakan input filter dan ketik “font-family”. Ini akan menunjukkan kepada Anda semua aturan CSS keluarga font. Di sini Anda dapat melihat bahwa ada dua, satu dicoret. Yang tidak dicoret adalah font yang diterapkan pada teks tertentu yang kita sukai. Yang dicoret biasanya adalah keluarga temuan yang lebih global yang telah ditulis ulang oleh yang lebih spesifik.

Dalam situasi ini, keluarga font adalah “Eina02, Semi Bold”. Font tambahan seperti Helvetica Neue adalah fallback, yang akan ditampilkan jika Eina tidak dimuat.

Cukup cari apa pun yang ditentukan di bawah keluarga font di Google, dan dia akan diarahkan ke hasil yang paling relevan untuk keluarga tertentu itu.

Gunakan Alat Pemeriksaan Peramban Firefox

Dengan Firefox, ini adalah proses yang sangat mirip untuk menemukan font yang digunakan situs web. Klik kanan, dan pilih periksa.

Gunakan fitur filter untuk menemukan font-family. Dalam contoh ini, kodenya terlihat seperti ini:

h1, h2 {
    font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif;
    font-weight: normal;
}
Code language: CSS (css)

Sekarang, cari nama di Google; dalam contoh ini adalah “RooneySans-Medium”.

Gunakan Arahkan Arahkan

Kami menggunakan alat yang dirancang untuk membuat hidup pengembang situs web lebih mudah yang disebut Arahkan kursor. Ini adalah ekstensi browser berbayar dengan beberapa lusin fitur, dan salah satunya adalah identifikasi font otomatis.

Hoverify pada dasarnya adalah alat pengembang dan inspektur browser pada steroid. Fitur identifikasi font melangkah lebih jauh dari metode yang diuraikan di atas karena akan menunjukkan kepada Anda semua font yang terkait dengan elemen HTML tertentu, seperti:

Gunakan Pencocokan FontSpring

Jika Anda ingin mengidentifikasi font dalam gambar atau tangkapan layar situs web, ada cara untuk melakukannya juga. Ini jauh lebih tidak akurat daripada metode yang diuraikan di atas, tetapi jika Anda memiliki gambar statis, ini adalah pilihan terbaik Anda.

FontSpring Matcherator adalah alat online gratis yang memungkinkan Anda mengunggah gambar dan kemudian menggunakan teknologi pengenalan untuk mencocokkan font ke database besar opsi gratis dan berbayar.

Kesimpulan

Ada beberapa cara untuk mengidentifikasi font apa yang digunakan situs web. Yang paling mudah mungkin hanya menggunakan alat pengembang bawaan Anda. Dengan menggunakan fitur filter, Anda bahkan tidak perlu memahami kode untuk mendapatkan aturan CSS font-family dan mengidentifikasi nama spesifik font tersebut. Jika Anda memiliki tips dan trik lain, jangan ragu untuk meninggalkannya di bagian komentar di bawah.