Tutorial: Bagaimana Cara Melihat Font yang Digunakan Sebuah Website

Teman-teman pasti pernah melakukan penelusuran web dan menemukan suatu font yang unik tetapi teman-teman tidak dapat mengidentifikasi jenis font apa yang digunakan pada text atau kata tersebut? Nah pada artikel yang berjudul “Tutorial: Bagaimana Cara Melihat Font yang Digunakan Sebuah Website“, saya akan tunjukkan bagaimana cara mengidentifikasi dan menemukan font-font tersebut dengan tepat.

Cara Melihat Font yang Digunakan Sebuah Website

1. Buka Browser Inspector

Untuk pengguna browser Chrome atau Firefox, teman-teman dapat melakukannya dengan right-clicking (mengklik kanan) dan pilih “Inspect” atau dengan cara menekan tombol shortcut dibawah ini pada keyboard:

  • Ctrl + Shift + I untuk pengguna Windows
  • Cmd + Shift + I untuk pengguna Mac
2. Pilih Element (Kalimat atau Huruf) Yang Ingin Dilihat Fontnya

Periksa font pada kalimat atau huruf tersebut dengan cara mengarahkan kursor ke elemen yang fontnya ingin teman-teman ketahui. Teman-teman dapat melakukan hal ini dengan mengklik Inspect pada elemen itu sendiri atau dengan cara melakukan navigasi ke elemen dalam document object model (DOM) pada browser inspector, peta elemen HTML berikutnya yang membentuk situs. (Perhatikan bagian halaman mana yang disorot saat teman-teman menelusuri DOM).

3. Lihat Font Yang Digunakan pada element (Kalimat atau Huruf) Pada Menu Computed

Setelah teman-teman memilih dan berada di elemen yang tepat, pilih menu Computed tab (berada disebelah kanan) di browser inspector dan gulir ke bawah tepat pada font-family atribut. Apa yang tertulis di sana itulah font yang digunakan pada elemen tersebut.

Tips Tambahan:

Ekstensi seperti WhatFont (tersedia untuk Chrome, Firefox dan Safari) dapat teman-teman gunakan dengan mudah untuk mendeteksi font families dari element atau teks apa pun di halaman web. Teman-teman hanya perlu menginstal ekstensi tersebut, kemudian mengaktifkannya. Pada situs web yang akan dilihat fontnya kemudian pilih pada elemen yang ingin teman-teman periksa jenis fontnya. Dan hasilnya akan ditampilkan dalam floating box.

Video Tutorial: Bagaimana Cara Melihat Font yang Digunakan Sebuah Website

Untuk lebih jelasnya teman-teman bisa lihat video Tutorial: Bagaimana Cara Melihat Font yang Digunakan Sebuah Website

Download Link

WhatFont Chrome Extension

5/5 (7 Reviews)
Lalu Zulfakar Hidayat

Hi, Perkenalkan nama ku Lalu Zulfakar. Seorang Back-End Developer, Desainer Grafis, Blogger dan Hacking & Cyber Security Enthusiast.

View Comments

Share
Published by
Lalu Zulfakar Hidayat
Tags: Desain Grafis SEO Website WordPress

Recent Posts

  • Tips & Trik
  • Tutorial
  • Video

Tutorial: Unsubscribe Channel Youtube Dengan Sangat Cepat

Tutorial: Unsubscribe Channel Youtube Dengan Sangat Cepat. Cukup dengan menggunakan sebuah script yang akan secara otomatis melakukan unsubscribe.

2 minggu ago
  • Ensiklopedia Bebas

Daftar Film Tentang Hacker, Wajib Ditonton!

Film, Dokumenter, dan Acara TV memberi kita wawasan tentang topik yang tidak kita ketahui atau ingin ketahui. Berikut ini daftar…

3 minggu ago
  • Ensiklopedia Bebas

DuckDuckGo Bukan Search Engine (SE) Dark Web

DuckDuckGo adalah mesin pencari clearnet yang tidak melacak user/penggunanya berdasarkan pencariannya.

4 minggu ago
  • Tips & Trik
  • Tutorial

Tutorial: Cara Mengamankan File PDF atau Dokumen

Berikut ini beberapa tindakan keamanan yang dilakukan untuk melindungi file PDF dan dokumen teman-teman termasuk: 1. Proteksi dengan Kata Sandi.

4 minggu ago
  • Download
  • Ensiklopedia Bebas
  • Ethical Hacking
  • Pemrograman Web Lanjut
  • Tips & Trik
  • Tutorial

Google Dorks: Kumpulan SQL Dorks Terbaru 2019

SQL injection adalah teknik yang penyerangan nya mengambil alih kerentanan masukan non-validated & menyuntikkan perintah SQL melalui aplikasi web.

4 minggu ago
  • Download
  • Ethical Hacking

Tutorial: Hack Camera HP dengan Termux + Script

Mungkin disini ada teman-teman yang pernah ditipu? Atau tertipu dengan bisnis-bisnis dan akun-akun online shop? Dan teman-teman pasti ingin tahu…

2 bulan ago