List All Fonts skenira bilo koju web stranicu i prikazuje potpuni popis svake obitelji fontova u upotrebi — web fontovi učitani s CDN-ova, self-hosted fontovi i sistemski font fallbackovi. Svaki font prikazuje pregled teksta uživo, učitane težine i stilove, broj elemenata koji ga koriste te kopiranje CSS font-family deklaracije jednim klikom.
Identifikacija fontova na web stranici koju divite nekada je zahtijevala pregled elemenata jednog po jednog u DevToolsu, provjeru izračunate font-family vrijednosti ili korištenje ekstenzija preglednika koji detektiraju samo jedan font odjednom. List All Fonts daje vam kompletnu sliku u jednom prikazu — svaki font učitan i korišten na stranici, s uzorcima teksta uživo koji prikazuju točno kako se svaki font renderira. Alat razlikuje web fontove (učitane putem @font-face ili Google Fonts) od sistemskih fontova (Arial, Helvetica, Georgia itd.), prikazujući kompletni font-family stack. Za svaki font vidite koje su težine učitane (400, 600, 700), koji ga elementi koriste i koje veličine fonta su primijenjene. Kliknite bilo koji font za kopiranje CSS deklaracije — spreman za lijepljenje u vlastiti projekt. Pregled uživo koristi stvarno renderiranje fonta sa stranice, ne generički pregled, pa vidite točno kako font izgleda pri veličinama i težinama korištenim na stranici.
Prikazuje svaki font-family koji se stvarno renderira na stranici, uključujući web fontove iz Google Fonts, Adobe Fonts ili prilagođene @font-face deklaracije, te sistemske font fallbackove. Prikazuje ukupan broj pronađenih jedinstvenih obitelji fontova.
Svaki font prikazan je s uzorkom teksta uživo ("The quick brown fox jumps over the lazy dog") renderiranim korištenjem stvarne datoteke fonta učitane na stranici. Vidite stvarno renderiranje — ne generički pregled.
Za svaki font vidite koje su težine učitane (Regular 400, Medium 500, SemiBold 600, Bold 700) i jesu li dostupne kurzivne varijante. Pomaže vam razumjeti učitani podskup fonta.
Vidite koliko elemenata na stranici koristi svaki font. Font koji se najčešće koristi nalazi se na vrhu popisa. Znate koji su fontovi primarni (tekst tijela) a koji sekundarni (koriste ih samo rijetki elementi).
Kliknite bilo koji unos fonta za kopiranje njegove kompletne CSS font-family deklaracije (npr. font-family: 'Inter', sans-serif) u međuspremnik. Spreman za izravno lijepljenje u vaš stylesheet.
Svaki font prikazuje svoj izvor: Google Fonts (s određenim URL-om), Adobe Fonts, self-hosted (s @font-face URL-om) ili sistemski font. Točno znate odakle dolazi svaki font.
Posjetite web stranicu s prekrasnom tipografijom i odmah vidite svaki font koji koristi — nazive, težine i odakle dolaze. Više nema pogađanja "koji je to font?" ili korištenja nepouzdanih alata za identifikaciju fontova.
Koliko fontova učitava vaša stranica? Postoje li nekorišteni fontovi koji se preuzimaju ali se ne primjenjuju? List All Fonts prikazuje stvarno korištenje — ako učitani font ima 0 elemenata koji ga koriste, to je uzaludna propusnost.
Dokumentirajte tipografiju svog projekta pokretanjem List All Fonts na svakoj stranici. Provjerite koriste li se ispravni fontovi i težine dosljedno na cijeloj stranici — otkrijte neovlaštene font-family deklaracije.
Identificirali ste font koji vam se sviđa, ali je plaćen? Kopirajte naziv fonta i potražite besplatne alternative sa sličnim karakteristikama. Pregled uživo pomaže vam zapamtiti točno kako je izgledao.
Pokrenite List All Fonts na istoj stranici u različitim preglednicima kako biste provjerili renderiraju li se isti fontovi svugdje. Sistemski font stackovi razrješavaju se različito na različitim operativnim sustavima — otkrijte nekonzistentnosti.
Otvorite plutajuću traku DevSuite Pro i kliknite ikonu List All Fonts. Alat skenira izračunate stilove stranice i @font-face pravila.
Ploča prikazuje sve fontove pronađene na stranici, sortirane po učestalosti korištenja. Svaki unos prikazuje naziv fonta, tekst pregleda, težine i broj elemenata.
Pomičite se kroz preglede uživo kako biste vidjeli kako se svaki font renderira. Usporedite font naslova stranice nasuprot fontu tijela nasuprot naglasnom fontu.
Kliknite bilo koji unos fonta za kopiranje njegove font-family CSS deklaracije. Kliknite izvornu vezu za posjet podrijetlu fonta (stranica Google Fonts, CDN URL itd.).
Zalijepite font-family deklaraciju u vaš CSS i učitajte font iz istog izvora kako biste ga koristili u vlastitom projektu.
Instalirajte DevSuite Pro besplatno i otključajte 39+ razvojnih alata za svoj preglednik.
