Lista wszystkich czcionek skanuje dowolną stronę i przedstawia kompletny inwentarz każdej rodziny czcionek w użyciu — czcionki webowe ładowane z CDN, czcionki hostowane samodzielnie i systemowe czcionki zastępcze. Każda czcionka pokazuje podgląd tekstu na żywo, załadowane wagi i style, liczbę elementów jej używających oraz kopiowanie deklaracji CSS font-family jednym kliknięciem.
Identyfikowanie czcionek na stronie, którą podziwiasz, kiedyś wymagało sprawdzania elementów pojedynczo w DevTools, sprawdzania obliczonej właściwości font-family lub używania rozszerzeń przeglądarki, które wykrywają tylko jedną czcionkę naraz. Lista wszystkich czcionek daje ci kompletny obraz w jednym widoku — każdą czcionkę załadowaną i używaną na stronie, z próbkami tekstu na żywo pokazującymi dokładnie, jak każda czcionka się renderuje. Narzędzie odróżnia czcionki webowe (ładowane przez @font-face lub Google Fonts) i czcionki systemowe (Arial, Helvetica, Georgia itd.), pokazując kompletny stos font-family. Dla każdej czcionki widzisz, które wagi są załadowane (400, 600, 700), które elementy jej używają i jakie rozmiary czcionek są stosowane. Kliknij dowolną czcionkę, aby skopiować jej deklarację CSS — gotowe do wklejenia do twojego projektu. Podgląd na żywo używa rzeczywistego renderowania czcionki ze strony, nie generycznego podglądu, więc widzisz dokładnie, jak czcionka wygląda w rozmiarach i wagach używanych na stronie.
Wymienia każdą font-family faktycznie renderowaną na stronie, w tym czcionki webowe z Google Fonts, Adobe Fonts lub niestandardowe deklaracje @font-face oraz systemowe czcionki zastępcze. Pokazuje łączną liczbę znalezionych unikalnych rodzin czcionek.
Każda czcionka jest wyświetlana z próbką tekstu na żywo ("Zażółć gęślą jaźń") renderowaną przy użyciu rzeczywistego pliku czcionki załadowanego na stronie. Widzisz prawdziwe renderowanie — nie generyczny podgląd.
Dla każdej czcionki zobacz, które wagi są załadowane (Regular 400, Medium 500, SemiBold 600, Bold 700) i czy dostępne są warianty kursywy. Pomaga zrozumieć załadowany podzbiór czcionki.
Zobacz, ile elementów na stronie używa każdej czcionki. Najczęściej używana czcionka jest wymieniona jako pierwsza. Dowiedz się, które czcionki są główne (tekst główny), a które drugorzędne (używane tylko na kilku elementach).
Kliknij dowolny wpis czcionki, aby skopiować jej kompletną deklarację CSS font-family (np. font-family: 'Inter', sans-serif) do schowka. Gotowe do wklejenia bezpośrednio do arkusza stylów.
Każda czcionka pokazuje swoje źródło: Google Fonts (z konkretnym URL-em), Adobe Fonts, hostowana samodzielnie (z URL-em @font-face) lub czcionka systemowa. Wiedz dokładnie, skąd pochodzi każda czcionka.
Odwiedź stronę z piękną typografią i natychmiast zobacz każdą używaną czcionkę — nazwy, wagi i skąd pochodzą. Koniec ze zgadywaniem "jaka to czcionka?" lub używaniem niewiarygodnych narzędzi do identyfikacji czcionek.
Ile czcionek ładuje twoja strona? Czy są nieużywane czcionki, które są pobierane, ale nie stosowane? Lista wszystkich czcionek pokazuje rzeczywiste użycie — jeśli załadowana czcionka ma 0 elementów jej używających, to zmarnowana przepustowość.
Udokumentuj typografię swojego projektu, uruchamiając Listę wszystkich czcionek na każdej stronie. Zweryfikuj, że właściwe czcionki i wagi są używane spójnie w całej witrynie — wychwyć nieuczciwe deklaracje font-family.
Zidentyfikowałeś czcionkę, która ci się podoba, ale jest płatna? Skopiuj nazwę czcionki i wyszukaj darmowe alternatywy o podobnych cechach. Podgląd na żywo pomaga zapamiętać, jak dokładnie wyglądała.
Uruchom Listę wszystkich czcionek na tej samej stronie w różnych przeglądarkach, aby zweryfikować, że te same czcionki są renderowane wszędzie. Stosy czcionek systemowych rozwiązują się różnie między systemami operacyjnymi — wychwyć niespójności.
Otwórz pływający dok DevSuite Pro i kliknij ikonę Lista wszystkich czcionek. Narzędzie skanuje obliczone style strony i reguły @font-face.
Panel wyświetla wszystkie czcionki znalezione na stronie, posortowane według częstotliwości użycia. Każdy wpis pokazuje nazwę czcionki, tekst podglądu, wagi i liczbę elementów.
Przewijaj podglądy na żywo, aby zobaczyć, jak renderuje się każda czcionka. Porównaj czcionkę nagłówków strony vs czcionkę główną vs czcionkę akcentu.
Kliknij dowolny wpis czcionki, aby skopiować jej deklarację CSS font-family. Kliknij link źródłowy, aby odwiedzić pochodzenie czcionki (strona Google Fonts, URL CDN itp.).
Wklej deklarację font-family do swojego CSS i załaduj czcionkę z tego samego źródła, aby używać jej we własnym projekcie.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 39 narzędzi programistycznych dla swojej przeglądarki.
