4 Cara Mengetahui Nama Font yang Dipakai Website

cara mengetahui nama font website 4 Cara Mengetahui Nama Font yang Dipakai Website 2 cara mengetahui nama font website

Bagi seorang website developer atau graphics designer, font pastinya memegang peranan penting dalam penyampaian informasi melalui media digital.

Saat ini ada banyak sekali website dengan beragam font yang mereka gunakan. Terkadang kamu menemukan font tersebut sangat bagus dan layak untuk dicontoh.

Panduan berikut ini akan menjelaskan cara mengetahui font yang dipakai oleh sebuah website dengan cepat. Bukan cuma satu, ada empat opsi yang dapat kamu pilih sesuai kebutuhan masing-masing.

Tidak perlu software khusus, yang terpenting kamu memiliki satu dari beberapa browser populer seperti Google Chrome Mozilla Firefox, Opera, Microsoft Edge, atau Safari (semua versi desktop).

Sebelum memulai, pastikan kamu mengetahui cara menginstal ekstensi di Chrome karena mayoritas tutorial berikut mengacu pada browser tersebut.

#1 Mengetahui font website dengan ekstensi populer FontFace Ninja

Ini merupakan ekstensi browser paling direkomendasikan untuk mengidentifikasi font dari halaman web. Tidak hanya itu, kamu juga bisa mendapat informasi terkait seperti ukuran font, warna, spasi, jarak antar baris, dan sebagainya.

1. Download dan instal FontFace Ninja untuk Chrome, Firefox, atau Safari.

mengetahui font website 1 4 Cara Mengetahui Nama Font yang Dipakai Website 3 mengetahui font website 1

2. Pergi ke halaman web yang ingin dianalisa, lalu klik ikon FontFace Ninja yang ada di bagian atas jendela browser.

mengetahui font website 3 4 Cara Mengetahui Nama Font yang Dipakai Website 4 mengetahui font website 3

3. Arahkan kursor ke font yang ingin diketahui. Ekstensi ini akan memberi tahu nama font yang dipakai serta konfigurasinya.

mengetahui font website 4 4 Cara Mengetahui Nama Font yang Dipakai Website 5 mengetahui font website 4

Apabila font tersebut gratis, kamu akan diberikan opsi download. Namun jika font berbayar, kamu akan diarahkan ke halaman pembelian.

#2 Membaca jenis font dengan ekstensi WhatFont

Kurang lebih sama dengan FontFace Ninja, tetapi ekstensi yang satu ini sedikit lebih ringan dan responsif. Di luar dari itu, WhatFont berfungsi membaca jenis font, ukuran, style, lebar, ketebalan, warna, dan sebagainya termasuk akses download terhadap font.

1. Download dan instal ekstensi WhatFont untuk Chrome atau Safari.

mengetahui font website 5 4 Cara Mengetahui Nama Font yang Dipakai Website 6 mengetahui font website 5

2. Setelah dipasang, klik ikon WhatFont yang terletak di samping address bar browser.

mengetahui font website 7 4 Cara Mengetahui Nama Font yang Dipakai Website 7 mengetahui font website 7

3. Arahkan kursor pada font yang ingin dideteksi.

mengetahui font website 8 4 Cara Mengetahui Nama Font yang Dipakai Website 8 mengetahui font website 8

Untuk keluar dari tampilan layar WhatFont, klik tombol Exit WhatFont yang terletak di kanan atas browser.

#3 Membaca isi font website serta informasi lainnya dengan WhatRuns

Ekstensi bernama WhatRuns sangat direkomendasikan untuk para developer website. Pasalnya plugin ini dapat menganalisa komponen website seperti font, CMS, server, bahasa pemograman, hingga jaringan periklanan.

1. Download dan instal WhatRuns untuk Chrome atau Firefox.

mengetahui font website 9 4 Cara Mengetahui Nama Font yang Dipakai Website 9 mengetahui font website 9

2. Kunjungi sebuah halaman website lalu klik ikon WhatRuns di sisi kanan atas browser.

mengetahui font website 11 4 Cara Mengetahui Nama Font yang Dipakai Website 10 mengetahui font website 11

3. Kamu akan segera menerima informasi umum terkait komponen sebuah website, termasuk font yang digunakan.

mengetahui font website 12 4 Cara Mengetahui Nama Font yang Dipakai Website 11 mengetahui font website 12

Tidak seperti FontFace Ninja atau WhatFont, ekstensi WhatRuns lebih difokuskan pada profil website. Hal tersebut membuatnya lebih cocok untuk pengembang website ketimbang desainer grafis.

#4 Mengetahui font melalui fitur sumber halaman (level lanjutan)

Cara yang terakhir ialah menggunakan fitur page source atau sumber halaman. Metode ini umumnya bisa dimengerti oleh desainer web yang mengandalkan CSS. Meski begitu saya cukup yakin pengguna awam tetap dapat mengikutinya.

1. Kunjungi halaman website menggunakan browser apapun (entah itu Chrome, Firefox, Opera, atau Safari).

2. Kemudian klik kanan pada area kosong, klik Lihat sumber halaman atau tekan tombol CTRL+U.

mengetahui font website 13 4 Cara Mengetahui Nama Font yang Dipakai Website 12 mengetahui font website 13

3. Kamu akan melihat banyak kode website. Tekan CTRL+F lalu ketik font-family untuk mencari nama font.

mengetahui font website 14 4 Cara Mengetahui Nama Font yang Dipakai Website 13 mengetahui font website 14

Biasanya nama font terletak setelah font-family. Dalam satu halaman website kamu sangat mungkin menemukan lebih dari satu kata kunci tersebut.

Metode lainnya ialah melalui fitur Inspect Element (CTRL+SHIFT+I). Fitur tersebut memungkinkan kamu mengatur gaya teks sesuka hati, menjadikan halaman website sebagai sanbox untuk trial & error.

Namun sekali lagi, metode ini hanya direkomendasikan untuk pengguna tingkat lanjut yang setidaknya memahami CSS.


Itulah beberapa cara untuk mengetahui nama font yang dipakai sebuah halaman website. Dari semua metode tentu saja saya menyarankan opsi pertama karena paling praktis, lengkap, dan tersedia di browser populer.

About The Author

1 thought on “4 Cara Mengetahui Nama Font yang Dipakai Website”

  1. Terimakasih min atas tips-tipsnya dan panduannya serta sudah berbagi ilmu melalui artikel ini. Sangat bermanfaat bagi saya untuk menambah ilmu.

Leave a Comment

Your email address will not be published. Required fields are marked *