Temukan Font dengan Chrome & Firefox DevTools

Browser DevTools memungkinkan Anda memeriksa font yang tepat yang dirender pada elemen apa pun. Begini cara menggunakannya - dan kapan URL scanner adalah pilihan yang lebih cepat.

Chrome DevTools - Rendered Fonts

  1. 1Klik kanan teks apa pun di halaman dan pilih Inspect (atau tekan Ctrl+Shift+I / Cmd+Option+I).
    Menu konteks klik kanan Chrome dengan Inspect disorot biru
    Lihat tangkapan layar penuh
    Klik kanan teks apa pun, lalu klik Inspect
  2. 2Chrome membuka panel Elements dengan elemen yang diklik sudah disorot di pohon DOM.
  3. 3Di panel kanan, klik tab Computed (tab kedua, di sebelah Styles).
  4. 4Gulir ke bawah melewati properti CSS ke bagian Rendered Fonts.
    Tab Computed Chrome DevTools menampilkan Rendered Fonts: Inter Variable dari file woff2
    Lihat tangkapan layar penuh
    Tab Computed - gulir ke "Rendered Fonts" untuk melihat typeface aktif
  5. 5Anda melihat typeface yang digunakan browser, file sumber yang dimuat, dan berapa banyak glyph yang digambar.

Firefox DevTools - Tab Fonts

  1. 1Klik kanan teks apa pun dan pilih Inspect (atau tekan F12). Panel Inspector terbuka.
  2. 2Di panel kanan Inspector (tempat biasanya Rules dan Computed terlihat), klik tab Fonts.
  3. 3Kolom kiri mencantumkan setiap font yang dimuat di halaman. Klik nama font untuk melihat spesimen, rentang berat, format, dan URL sumber.
    Tab Fonts Firefox DevTools - Inter Variable dipilih, menampilkan spesimen dan detail
    Lihat tangkapan layar penuh
    Tab Fonts Firefox - semua font halaman di kiri, detail di kanan

Keterbatasan Pendekatan DevTools

DevTools sangat baik untuk memeriksa elemen individual, tetapi tidak memberi Anda inventaris lengkap setiap font yang dimuat halaman. Anda perlu mengklik setiap elemen teks secara manual. Untuk audit penuh - tempel URL di bawah.

Lebih Cepat: Scan Halaman Penuh dengan URL

Tempel URL apa pun dan dapatkan daftar lengkap semua web font yang digunakan - setiap aturan @font-face, impor Google Fonts, dan tautan CDN - dalam satu scan.

Pertanyaan yang Sering Diajukan

Apa itu "Rendered Fonts" di Chrome?

Rendered Fonts menampilkan typeface sebenarnya yang digunakan browser untuk menggambar teks yang dipilih - setelah menerapkan fallback font-family. Ini bisa berbeda dari deklarasi CSS font-family.

Mengapa rendered font berbeda dari CSS font-family?

font-family adalah daftar fallback berprioritas. Jika font pertama gagal dimuat (file hilang, error CORS), browser beralih ke kandidat berikutnya. Rendered Fonts menampilkan apa yang sebenarnya digunakan.

Bisakah saya menemukan semua font di halaman dengan DevTools?

Tab Fonts Firefox menampilkan setiap font yang dimuat halaman. Chrome mengharuskan pemeriksaan elemen satu per satu. Untuk inventaris otomatis lengkap, gunakan URL scanner di atas.

Apakah URL scanner juga mendeteksi Google Fonts?

Ya - semua sumber font terdeteksi: Google Fonts, Bunny Fonts, Fontshare, dan font @font-face yang di-host sendiri.

Kembali ke pemeriksa font