Liệt kê tất cả phông chữ quét trang và hiển thị danh mục đầy đủ của mọi họ phông chữ được sử dụng.
Xác định font chữ trên một trang web bạn yêu thích trước đây đòi hỏi phải kiểm tra từng phần tử một trong DevTools, xem thuộc tính font-family đã tính toán, hoặc dùng các extension trình duyệt chỉ phát hiện được một font tại một thời điểm. List All Fonts cho bạn cái nhìn toàn cảnh chỉ trong một màn hình — mọi font được tải và sử dụng trên trang, kèm mẫu văn bản trực tiếp cho thấy chính xác mỗi font hiển thị như thế nào.
Công cụ phân biệt giữa web font (tải qua @font-face hoặc Google Fonts) và font hệ thống (Arial, Helvetica, Georgia, v.v.), hiển thị toàn bộ chuỗi font-family. Với mỗi font, bạn thấy được những weight nào đã được tải, những phần tử nào sử dụng nó, và những cỡ chữ nào đang được áp dụng. Nhấp vào bất kỳ font nào để sao chép khai báo CSS của nó — sẵn sàng dán vào dự án của riêng bạn.
Variable font — một file font duy nhất bao phủ toàn bộ dải weight và width thay vì phải phát hành một file riêng cho mỗi weight — được nhận diện là variable và hiển thị dải trục (axis) được hỗ trợ thay vì bị liệt kê như một weight cố định duy nhất. Bản xem trước trực tiếp sử dụng chính cách render font thực tế trên trang, không phải một bản xem trước chung chung, nên bạn thấy chính xác font trông như thế nào ở các cỡ chữ và weight đang được dùng trên trang.
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.
Cài đặt DevSuite Pro miễn phí và mở khóa hơn 64 công cụ dành cho nhà phát triển cho trình duyệt của bạn.
