FontLens

Ekstensi gratis untuk Chrome

Font apa ini? Klik kanan dan lihat CSS-nya

Pilih teks di situs web mana pun, klik kanan, lalu pilih Inspect font with FontLens. Pemeriksa font akan terbuka di atas halaman dan menampilkan family, ukuran, ketebalan, tinggi baris, warna, CSS siap salin, serta tombol untuk mengunduh font.

Tambahkan ke Chrome — gratis

Juga berfungsi di Edge, Brave, Opera, dan browser berbasis Chromium lainnya.

Pemeriksa FontLens: contoh Ag di antara panduan cap-height, x-height, dan baseline, properti font, serta cuplikan Tailwind

Sekilas

Fungsi
Menampilkan font teks yang Anda pilih: family, ukuran, ketebalan, tinggi baris, warna, dan gaya lain yang berbeda dari bawaan, beserta CSS siap salin.
Cara memulai
Pilih teks, klik kanan, lalu pilih Inspect font with FontLens. Menu hanya muncul saat teks dipilih.
Format salinan
CSS, SCSS, SASS, atau Tailwind, dengan ukuran dalam px, rem, pt, atau em.
File font
Download font mengambil font web dari sumber @font-face. Periksa lisensi font sebelum menggunakannya.
Untuk siapa
Desainer web, front-end developer, auditor aksesibilitas, dan pelajar CSS.
Harga
Gratis. Tanpa akun dan tanpa versi berbayar.
Data
Berjalan di browser Anda. Tanpa server dan analitik. Satu-satunya permintaan jaringan adalah unduhan font yang Anda mulai.
Berfungsi di
Chrome dan browser Chromium lain yang memasang ekstensi dari Chrome Web Store. Tidak mendukung Firefox atau Safari.
Batasan
Membaca CSS teks sungguhan di halaman web. Tidak membaca teks dalam gambar, kanvas, PDF, atau halaman Chrome sendiri.
Versi
2.2.0, diperbarui 23 Oktober 2026

Dua klik untuk menemukan font

  1. 1

    Pilih teks

    Judul, paragraf, atau label tombol di halaman web mana pun.

  2. 2

    Klik kanan

    Pilih Inspect font with FontLens. Pemeriksa terbuka di atas halaman dengan family, ukuran, ketebalan, tinggi baris, dan warna.

  3. 3

    Salin atau sesuaikan

    Salin CSS atau Tailwind, coba ukuran atau warna lain di pratinjau langsung, atau unduh file font.

Alasan orang menggunakannya

Aa

Cari nama typeface

Melihat judul yang Anda suka? Pilih teksnya untuk melihat family, ketebalan, dan sumber font: Google Fonts, Adobe Fonts, atau situs itu sendiri.

{ }

Cocokkan dengan mockup

Bandingkan angka di halaman langsung dengan file desain, lalu salin aturannya sebagai CSS, SCSS, SASS, atau Tailwind.

4.5:1

Periksa kontras

Lihat rasio kontras dengan penanda AA dan AAA, lalu coba teks yang lebih gelap atau latar yang lebih terang sebelum desain dirilis.

Yang bisa dilakukan

  • Contoh dengan panduan

    Family pertama di dalam stack, ditampilkan di antara panduan cap-height, x-height, dan baseline yang diukur dari font itu sendiri.

  • format cuplikan

    CSS, SCSS, SASS, dan Tailwind. Salin seluruh cuplikan atau satu baris; format terakhir Anda akan diingat.

  • Satuan pilihan

    Tampilkan ukuran dalam px, rem, pt, atau em pada kolom dan cuplikan. rem mengikuti ukuran root halaman.

  • Sumber font

    Lencana menunjukkan sumber font: Google Fonts, Adobe Fonts, hosting sendiri, atau font sistem di komputer Anda.

  • Pemeriksaan kontras

    Rasio antara teks dan latar dengan penanda AA dan AAA untuk teks normal maupun besar, diperbarui saat warna berubah.

  • Download font

    Mengambil file dari sumber @font-face dan menamainya sesuai family. Jika server memblokirnya, sumber dibuka di tab baru.

Mengapa mencari font di DevTools begitu lama?

Halaman mendeklarasikan daftar font dan browser memakai font pertama yang tersedia. Untuk mengetahuinya, buka DevTools, cari elemennya, baca panel Computed, lalu cari file font di panel Network. Ukuran, ketebalan, tinggi baris, dan warna ada di tempat berbeda.

FontLens membaca gaya hasil komputasi dari teks pilihan Anda lalu menampilkannya dalam satu panel: stack family, contoh family pertama, angka, sumber font, dan CSS. Karena membaca CSS halaman, alat ini tidak dapat mengenali font dalam gambar.

Semua tetap di browser Anda

  • Tanpa akun atau server

    FontLens berjalan di browser Anda. Tanpa analitik dan pelacakan.

  • Membaca pilihan Anda

    Pemeriksa membaca gaya teks yang Anda klik kanan. Tidak ada informasi halaman yang dikirim ke mana pun.

  • Empat izin

    Menu konteks untuk opsi klik kanan, tab aktif dan akses halaman agar pemeriksa terbuka, serta penyimpanan untuk teks contoh, satuan, dan format cuplikan.

Chrome DevTools dibanding FontLens

Chrome DevTools dibanding FontLensChrome DevToolsFontLens
Melihat font dari teksPeriksa elemen, lalu buka panel ComputedPilih teks, klik kanan, pilih satu menu
Salin sebagai Tailwind atau SCSSTidak bisa; salin nilainya satu per satuTab CSS, SCSS, SASS, atau Tailwind
Sumber fontCari file font di panel NetworkLencana: Google Fonts, Adobe Fonts, hosting sendiri, atau sistem
Unduh file fontCari di Network atau Sources lalu simpanSatu tombol
Periksa kontrasDi pemilih warna panel StylesPenanda AA dan AAA di sebelah pratinjau langsung
HargaBawaanGratis

Pertanyaan

Bagaimana cara mencari tahu font yang dipakai situs?

Tambahkan FontLens ke Chrome, pilih teks di situs, klik kanan, lalu pilih Inspect font with FontLens. Anda akan melihat font family, ukuran, ketebalan, tinggi baris, warna, dan sumber font.

Bagaimana cara menyalin CSS font dari situs?

Di pemeriksa, pilih tab CSS, SCSS, SASS, atau Tailwind lalu tekan Copy all, atau salin satu baris. Ganti satuan ke px, rem, pt, atau em terlebih dahulu bila perlu.

Bisakah saya mengunduh font dari situs?

Jika teks memakai font web, Download font mengambil file dari sumber @font-face. Font sistem tidak memiliki file untuk diunduh. Periksa lisensi font sebelum memakainya di proyek Anda.

Bisakah FontLens mengenali font dalam gambar atau PDF?

Tidak. FontLens membaca CSS teks sungguhan di halaman web, jadi tidak dapat mengenali font dalam gambar, kanvas, atau PDF.

Bagaimana cara memeriksa kontras teks untuk WCAG?

Pratinjau menampilkan rasio kontras antara warna teks dan latar, dengan penanda AA dan AAA untuk teks normal dan besar. Ubah salah satu warna untuk memperbarui penanda.

Bisakah ukuran ditampilkan dalam rem, bukan px?

Bisa. Ganti satuan ke px, rem, pt, atau em; kolom dan cuplikan akan mengikuti. rem dihitung dari ukuran font root halaman, dan pilihan Anda diingat.

Apakah gratis? Apakah data dikumpulkan?

Gratis dan tanpa akun. Tidak ada server atau analitik; satu-satunya permintaan jaringan adalah unduhan font yang Anda mulai.

Apakah berfungsi di Edge, Brave, atau Opera?

Sebagian besar browser Chromium dapat memasang ekstensi dari Chrome Web Store, termasuk Edge, Brave, Opera, dan Vivaldi. Firefox dan Safari tidak didukung.

Ekstensi gratis lainnya dari PYROCTAL

Font apa itu? Dua klik saja.

Tambahkan ke Chrome — gratis