Pindai halaman dan tampilkan inventaris lengkap setiap keluarga font.
Pindai halaman dan tampilkan inventaris lengkap setiap keluarga font. Alat ini memberikan transparansi penuh terhadap semua aset tipografi yang dimuat, membantu Anda mengaudit performa dan mengidentifikasi gaya tulisan yang digunakan pada situs web mana pun.
Mencantumkan setiap keluarga font (font-family) yang benar-benar dirender di halaman, termasuk web font dari Google Fonts, Adobe Fonts, atau deklarasi @font-face kustom, serta sistem font fallback. Menampilkan jumlah total keluarga font unik yang ditemukan.
Setiap font ditampilkan dengan sampel teks langsung ("The quick brown fox jumps over the lazy dog") yang dirender menggunakan file font aktual yang dimuat di halaman. Anda melihat perenderan nyata — bukan pratinjau generik.
Untuk setiap font, lihat bobot (weight) mana saja yang dimuat (Regular 400, Medium 500, SemiBold 600, Bold 700) dan apakah tersedia varian miring (italic). Membantu Anda memahami subset font yang dimuat.
Lihat berapa banyak elemen pada halaman yang menggunakan setiap font. Font yang paling banyak digunakan akan dicantumkan pertama kali. Ketahui font mana yang utama (teks isi) dan mana yang sekunder (hanya digunakan pada beberapa elemen).
Klik entri font apa pun untuk menyalin deklarasi CSS font-family lengkapnya (misal, font-family: 'Inter', sans-serif) ke clipboard Anda. Siap untuk ditempelkan langsung ke stylesheet Anda.
Setiap font menunjukkan sumbernya: Google Fonts (dengan URL spesifik), Adobe Fonts, self-hosted (dengan URL @font-face), atau font sistem. Ketahui persis dari mana setiap font berasal.
Kunjungi situs web dengan tipografi indah dan lihat secara instan setiap font yang digunakannya — nama, bobot, dan dari mana asalnya. Tidak ada lagi tebak-tebakan "font apa itu?" atau menggunakan alat identifikasi font yang tidak andal.
Berapa banyak font yang dimuat halaman Anda? Apakah ada font yang tidak terpakai yang diunduh tetapi tidak diterapkan? Daftar Semua Font menunjukkan penggunaan aktual — jika font yang dimuat memiliki 0 elemen yang menggunakannya, itu adalah pemborosan bandwidth.
Dokumentasikan tipografi proyek Anda dengan menjalankan Daftar Semua Font di setiap halaman. Verifikasi bahwa font dan bobot yang benar digunakan secara konsisten di seluruh situs — temukan deklarasi font-family yang tidak seharusnya.
Menemukan font yang Anda suka tetapi ternyata berbayar? Salin nama font tersebut dan cari alternatif gratis dengan karakteristik serupa. Pratinjau langsung membantu Anda mengingat persis tampilannya.
Jalankan Daftar Semua Font pada halaman yang sama di browser berbeda untuk memverifikasi bahwa font yang sama dirender di mana-mana. Stack font sistem dapat diurai secara berbeda di berbagai sistem operasi — temukan ketidakkonsistenannya.
Buka dok mengambang DevSuite Pro dan klik ikon Daftar Semua Font. Alat akan memindai gaya komputasi halaman dan aturan @font-face.
Panel akan menampilkan semua font yang ditemukan di halaman, diurutkan berdasarkan frekuensi penggunaan. Setiap entri menunjukkan nama font, teks pratinjau, bobot, dan jumlah elemen.
Gulir melalui pratinjau langsung untuk melihat bagaimana setiap font dirender. Bandingkan font judul vs font teks isi vs font aksen pada halaman.
Klik entri font mana pun untuk menyalin deklarasi CSS font-family-nya. Klik tautan sumber untuk mengunjungi asal font (halaman Google Fonts, URL CDN, dll.).
Tempelkan deklarasi font-family ke dalam CSS Anda dan muat font dari sumber yang sama untuk menggunakannya di proyek Anda sendiri.
Instal DevSuite Pro secara gratis dan buka 64+ alat pengembang untuk browser Anda.
