Pindai halaman dan tampilkan inventaris lengkap setiap keluarga font.
Mengenal pasti fon pada laman web yang anda kagumi dahulunya memerlukan anda memeriksa elemen satu demi satu dalam DevTools, menyemak sifat font-family yang computed, atau menggunakan sambungan pelayar yang hanya mengesan satu fon pada satu masa. List All Fonts memberikan anda gambaran lengkap dalam satu paparan — setiap fon yang dimuatkan dan digunakan pada halaman, lengkap dengan contoh teks langsung yang menunjukkan tepat bagaimana setiap fon dipaparkan.
Alat ini membezakan antara web font (dimuatkan melalui @font-face atau Google Fonts) dan system font (Arial, Helvetica, Georgia, dan sebagainya), sambil menunjukkan keseluruhan font-family stack. Untuk setiap fon, anda dapat melihat weight mana yang dimuatkan, elemen mana yang menggunakannya, dan saiz fon yang diterapkan. Klik mana-mana fon untuk menyalin deklarasi CSS-nya — sedia untuk ditampal ke dalam projek anda sendiri.
Variable font — satu fail fon yang meliputi keseluruhan julat weight dan width dan bukannya menghantar fail berasingan bagi setiap weight — dikenal pasti sebagai variable dan menunjukkan julat axis yang disokongnya, dan bukan disenaraikan sebagai satu weight tetap sahaja. Pratonton langsung menggunakan rendering fon sebenar daripada halaman, bukan pratonton generik, jadi anda melihat tepat bagaimana rupa fon tersebut pada saiz dan weight yang digunakan di laman web itu.
Lists every font-family actually rendered on the page, including web fonts from Google Fonts, Adobe Fonts, or custom @font-face declarations, and system font fallbacks. Shows the total count of unique font families found.
Each font is displayed with a live text sample ("The quick brown fox jumps over the lazy dog") rendered using the actual font file loaded on the page. You see real rendering — not a generic preview.
For each font, see which weights are loaded (Regular 400, Medium 500, SemiBold 600, Bold 700) and whether italic variants are available. Helps you understand the font's loaded subset.
See how many elements on the page use each font. The most-used font is listed first. Know which fonts are primary (body text) and which are secondary (used on just a few elements).
Click any font entry to copy its complete CSS font-family declaration (e.g., font-family: 'Inter', sans-serif) to your clipboard. Ready to paste directly into your stylesheet.
Each font shows its source: Google Fonts (with the specific URL), Adobe Fonts, self-hosted (with the @font-face URL), or system font. Know exactly where each font comes from.
Visit a website with beautiful typography and instantly see every font it uses — names, weights, and where they come from. No more "what font is that?" guessing or using unreliable font-identification tools.
How many fonts does your page load? Are there unused fonts being downloaded but not applied? List All Fonts shows actual usage — if a loaded font has 0 elements using it, it's wasted bandwidth.
Document your project's typography by running List All Fonts on each page. Verify that the correct fonts and weights are used consistently across the site — catch rogue font-family declarations.
Identified a font you like but it's a paid font? Copy the font name and search for free alternatives with similar characteristics. The live preview helps you remember exactly how it looked.
Run List All Fonts on the same page in different browsers to verify that the same fonts are rendered everywhere. System font stacks resolve differently across operating systems — catch inconsistencies.
Open the DevSuite Pro floating dock and click the List All Fonts icon. The tool scans the page's computed styles and @font-face rules.
A panel displays all fonts found on the page, sorted by usage frequency. Each entry shows the font name, preview text, weights, and element count.
Scroll through the live previews to see how each font renders. Compare the page's heading font vs body font vs accent font.
Click any font entry to copy its font-family CSS declaration. Click the source link to visit the font's origin (Google Fonts page, CDN URL, etc.).
Paste the font-family declaration into your CSS and load the font from the same source to use it in your own project.
Pasang DevSuite Pro secara percuma dan buka 64+ alat pembangun untuk pelayar anda.
