Sebuah halaman web yang khas umumnya terdiri dari beberapa elemen yang berbeda dengan kebanyakan dari mereka dikodekan dalam warna yang berbeda dan ditulis dalam font dan gaya yang berbeda. Terkadang, kami menemukan halaman web yang dirancang dengan sangat indah sehingga membuat kami ingin mempelajari lebih dalam tentang atributnya; tema yang sangat elegan atau font profesional yang bagus, mungkin.

Orang-orang yang mengenal font dan terpesona olehnya sering menggunakan alat pengenal font online gratis^{(free online font identifier tools)} untuk membantu menemukan font di web. Alat online ini mengharuskan Anda memasukkan URL atau mengunggah gambar dengan font yang dipamerkan, yang kemudian diperiksa. Jika Anda tidak ingin repot belajar menggunakan alat baru, posting ini cocok untuk Anda. Hari ini, kita akan membahas bagaimana pengguna dapat mengidentifikasi font apa yang digunakan halaman web tertentu tanpa menggunakan ekstensi browser, aplikasi, atau alat online apa pun.

Prosedur yang akan kita bahas dalam artikel ini akan berkisar pada pengaturan yang ditawarkan sebagian besar browser web, yaitu ' Alat Pengembang^{(Developer Tools)} ,' atau lebih spesifiknya, opsi yang disebut Elemen Inspeksi^{(Inspect Element)} . Di sini, kita akan membahas bagaimana font dapat diidentifikasi di dua browser – Chrome , Edge dan Firefox .

Identifikasi^(Identify) font pada halaman web menggunakan Inspect Element di Firefox

Kunjungi halaman web font yang ingin Anda identifikasi dan klik kanan pada teks yang ditulis dalam font yang Anda minati.

Dari daftar opsi yang muncul (menu konteks), klik Inspect Element . Melakukannya^(Doing) akan membuka Alat Pengembang^{(Developer Tools)} di bagian bawah halaman.

Di sudut kanan bawah bagian Alat Pengembangan^{(Development Tools)} , Anda akan menemukan subjudul bernama Font^(Fonts) , klik di atasnya.

Ini kemudian akan menampilkan untuk Anda properti font yang ingin Anda lihat seperti ukurannya, tinggi garis, berat, dll., dan juga apakah font dicetak miring atau tidak, meskipun itu selalu terlihat.

Jika Anda tertarik untuk mengetahui lebih banyak tentang font yang digunakan, Firefox telah membahasnya juga. Jika Anda menggulir ke bawah bagian font dan mengklik 'Semua font di halaman,' tab font akan meluas dan Anda akan diperlihatkan semua font yang sedang digunakan di halaman web yang Anda jelajahi saat ini, dan juga di mana mereka sedang digunakan. Bukan hanya itu, tetapi Anda juga mendapatkan pratinjau tentang tampilan font tertentu. Arahkan mouse Anda ke font di Alat Pengembang^{(Developer Tools)} akan menyorot bagian halaman web yang menggunakan font tersebut.

Identifikasi font menggunakan Alat Pengembang^{(Developer Tools)} di Chrome

Prosesnya mirip dengan yang dijelaskan di atas. Ikuti dua langkah pertama seperti yang Anda lakukan dengan Firefox untuk membuka Alat Pengembang^{(Developer Tools)} di sisi kanan halaman.

Klik pada sub-judul 'Dihitung'.

Gulir^(Scroll) ke bawah sedikit dan Anda akan menemukan informasi tentang font yang Anda minati (keluarga font, ukuran, dll.)

Sayangnya, Chrome tidak memberi Anda informasi tambahan seperti Firefox .

Identifikasi ^(Identify)Font mana yang digunakan menggunakan Edge Developer Tools

1. Tepi Terbuka
2. Klik kanan dan pilih teks
3. Pilih Inspeksi
4. Di Alat Pengembang^{(Developer Tools)} yang terbuka, lihat di bawah Dihitung^(Computed)
5. Anda akan melihat detail Font.

Jika Anda merasa tidak dapat bekerja dengan Alat Pengembang^{(Developer Tools)} peramban dan alat daring itu lebih cocok untuk Anda, ada beberapa di antaranya yang bekerja dengan sangat baik.

Baca selanjutnya^{(Read next)} : Cara menemukan alternatif gratis yang serupa dengan Font berbayar^{(find similar free alternatives to paid Fonts)} .

Identify fonts in Chrome, Edge and Firefox using Developer Tools

A typical web page generally consіsts of several different elements with most of them coded in different colors and written in dіfferent fonts and styles. Sometimes, we come across web pages so beautifully designed that they make us want to delve deep into their attributes; a very elegant theme or a nice, рrofessional font, perhaps.

People who know their way around fonts and are fascinated by them often use free online font identifier tools to help discover fonts on the web. These online tools require you to enter a URL or upload an image with the font showcased, which is then inspected. In case you don’t want to go through the hassle of learning to use a new tool, this post is for you. Today, we will discuss how users can identify what font a particular web page is using without using a browser extension, an application, or any online tools.

The procedure that we will be discussing in this article will revolve around a setting that most web browsers offer, namely ‘Developer Tools,’ or to be specific, an option called Inspect Element. Here, we will discuss how fonts can be identified in two browsers – Chrome, Edge and Firefox.

Identify fonts on a webpage using Inspect Element in Firefox

Visit the web page of the font of which you want to identify and right-click on the text that is written in the font you are interested in.

From the list of options that show up (the context menu), click on Inspect Element. Doing so would open the Developer Tools on the bottom of the page.

On the bottom right corner of the Development Tools section, you will find a subhead named Fonts, click on it.

It will then display for you the properties of the font you wanted to look into like its size, line height, weight, etc., and also whether or not the font is in italics or not, though that is always apparent.

If you are interested to know more about the font in use, Firefox has you covered with that too. If you scroll down the fonts section and click on ‘All fonts on the page,’ the fonts tab will expand and you will be shown all the fonts that are being used on the web page you are browsing at the moment, and also where they are being used. Not just that, but you also get a preview of how a particular font looks. Hovering your mouse over the fonts in the Developer Tools will highlight the sections of the web page that use that font.

Identify a font using Developer Tools in Chrome

The process is similar to the one described above. Follow the first two steps as you did with Firefox to open the Developer Tools on the right side of the page.

Click on the ‘Computed’ sub-head.

Scroll down a bit and you will find information about the font you’re interested in (font’s family, size, etc.)

Unfortunately, Chrome doesn’t provide you with any additional information like Firefox does.

Identify which Font is used using Edge Developer Tools

1. Open Edge
2. Right-click and select the text
3. Select Inspect
4. In the Developer Tools that open, look under Computed
5. You will see the Font details.

If you don’t think you can’t work around with browser Developer Tools and that online tools would suit you better, there are several of them that work very well.

Read next: How to find similar free alternatives to paid Fonts.

Related posts

• Cara mengunduh Font dari Website menggunakan Developer Tools

• Hapus Site Data untuk situs tertentu di Chrome or Edge menggunakan Developer Tools

• Cara Mengubah Default Font di Chrome, Edge, Firefox browser

• Nonaktifkan Developer Tools di Edge menggunakan Registry or Group Policy

• Kotak Fix Blurry File Open dialog di Google Chrome and Microsoft Edge

• Hapus semua Saved Passwords sekaligus dalam Chrome, Firefox, Edge

• Aktifkan Adobe Flash Player di Chrome, Edge, Firefox, IE, Opera

• Cara Menonaktifkan Geolocation di Firefox, Chrome, dan Edge

• Fix Google Maps Slow Masalah pada Chrome, Firefox, Edge pada Windows 11/10

• Keamanan, Privacy, Cleaning Alat untuk Edge, Firefox, Chrome, Opera

• 10 Best Chrome, Edge, dan Firefox Extensions untuk menyimpan halaman untuk dibaca nanti

• Restart Chrome, Edge or Firefox tanpa kehilangan tab di Windows 11/10

• Apakah aman untuk menyimpan kata sandi di Chrome, Firefox or Edge browser?

• Aktifkan DNS lebih HTTPS di Firefox, Chrome, Edge, Opera, Android, iPhone

• Cara Mengatur Parental Control di Chrome, Edge, Firefox, Opera

• Force Links untuk membuka di latar belakang Tab di Chrome, Edge, Firefox, Opera

• Allow atau Block Pop-Ups pada Chrome, Firefox, Edge, Opera, Internet Explorer

• Add Opera-like Speed Dial ke Chrome, Edge or Firefox

• Create Pintasan Halaman Web menggunakan Edge browser pada desktop Windows 10

• Cara Mengubah Homepage di Chrome, Firefox, Opera, Browser Edge