Pindai halaman dan tampilkan inventaris lengkap setiap keluarga font.
Pindai halaman dan tampilkan inventaris lengkap setiap keluarga font.
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.
Instal DevSuite Pro secara gratis dan buka 39+ alat pengembang untuk browser Anda.
