Identifying fonts on a website you admire used to require inspecting elements one by one in DevTools, checking the computed font-family property, or using browser extensions that only detect one font at a time. List All Fonts gives you the complete picture in one view — every font loaded and used on the page, with live text samples showing exactly how each font renders. The tool differentiates between web fonts (loaded via @font-face or Google Fonts) and system fonts (Arial, Helvetica, Georgia, etc.), showing the complete font-family stack. For each font, you see which weights are loaded (400, 600, 700), which elements use it, and what font sizes are applied. Click any font to copy its CSS declaration — ready to paste into your own project. The live preview uses the actual font rendering from the page, not a generic preview, so you see exactly how the font looks at the sizes and weights used on the site.
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.
