Listare Toate Fonturile scanează orice pagină web și prezintă un inventar complet al fiecărei familii de fonturi utilizate — fonturi web încărcate din CDN-uri, fonturi auto-găzduite și fallback-uri de fonturi de sistem. Fiecare font afișează o previzualizare live de text, greutățile și stilurile încărcate, numărul de elemente care îl utilizează și copiere cu un clic a declarației CSS font-family.
Identificarea fonturilor pe un site web pe care îl admiri necesita anterior inspectarea elementelor unul câte unul în DevTools, verificarea proprietății calculate font-family sau utilizarea extensiilor de browser care detectează doar un font pe rând. Listare Toate Fonturile îți oferă imaginea completă într-o singură vizualizare — fiecare font încărcat și utilizat pe pagină, cu mostre de text live care arată exact cum se randează fiecare font. Instrumentul diferențiază între fonturile web (încărcate via @font-face sau Google Fonts) și fonturile de sistem (Arial, Helvetica, Georgia etc.), arătând stiva completă font-family. Pentru fiecare font, vezi ce greutăți sunt încărcate (400, 600, 700), ce elemente îl utilizează și ce dimensiuni de font sunt aplicate. Fă clic pe orice font pentru a copia declarația sa CSS — gata de lipit în propriul tău proiect. Previzualizarea live utilizează randarea reală a fontului de pe pagină, nu o previzualizare generică, deci vezi exact cum arată fontul la dimensiunile și greutățile utilizate pe site.
Listează fiecare font-family randat efectiv pe pagină, inclusiv fonturile web din Google Fonts, Adobe Fonts sau declarații @font-face personalizate și fallback-urile de fonturi de sistem. Afișează numărul total de familii de fonturi unice găsite.
Fiecare font este afișat cu o mostră de text live randată folosind fișierul de font real încărcat pe pagină. Vei vedea randarea reală — nu o previzualizare generică.
Pentru fiecare font, observă ce greutăți sunt încărcate (Regular 400, Medium 500, SemiBold 600, Bold 700) și dacă sunt disponibile variante italice. Te ajută să înțelegi subsetul încărcat al fontului.
Observă câte elemente de pe pagină utilizează fiecare font. Fontul cel mai utilizat este listat primul. Știi care fonturi sunt primare (textul body) și care sunt secundare (utilizate numai pe câteva elemente).
Fă clic pe orice intrare de font pentru a copia declarația sa completă CSS font-family în clipboard. Gata de lipit direct în stylesheet-ul tău.
Fiecare font arată sursa sa: Google Fonts (cu URL-ul specific), Adobe Fonts, auto-găzduit (cu URL-ul @font-face) sau font de sistem. Știi exact de unde provine fiecare font.
Vizitează un site web cu tipografie frumoasă și observă instant fiecare font pe care îl utilizează — nume, greutăți și de unde provin. Nu mai ghici ce font este sau folosi instrumente nesigure de identificare a fonturilor.
Câte fonturi încarcă pagina ta? Există fonturi nefolosite care sunt descărcate dar nu aplicate? Listare Toate Fonturile arată utilizarea reală — dacă un font încărcat are 0 elemente care îl utilizează, este lățime de bandă risipită.
Documentează tipografia proiectului tău rulând Listare Toate Fonturile pe fiecare pagină. Verifică că fonturile și greutățile corecte sunt utilizate consistent pe tot site-ul — prinde declarații rogue font-family.
Ai identificat un font care îți place, dar este un font plătit? Copiază numele fontului și caută alternative gratuite cu caracteristici similare. Previzualizarea live te ajută să îți amintești exact cum arăta.
Rulează Listare Toate Fonturile pe aceeași pagină în browsere diferite pentru a verifica că aceleași fonturi sunt randate pretutindeni. Stivele de fonturi de sistem se rezolvă diferit pe sisteme de operare — prinde inconsistențele.
Deschide floating dock-ul DevSuite Pro și fă clic pe iconița Listare Toate Fonturile. Instrumentul scanează stilurile calculate ale paginii și regulile @font-face.
Un panou afișează toate fonturile găsite pe pagină, sortate după frecvența de utilizare. Fiecare intrare arată numele fontului, textul de previzualizare, greutățile și numărul de elemente.
Derulează prin previzualizările live pentru a vedea cum se randează fiecare font. Compară fontul de heading al paginii față de fontul body față de fontul accent.
Fă clic pe orice intrare de font pentru a copia declarația sa CSS font-family. Fă clic pe link-ul sursei pentru a vizita originea fontului (pagina Google Fonts, URL CDN etc.).
Lipește declarația font-family în CSS-ul tău și încarcă fontul din aceeași sursă pentru a-l utiliza în propriul tău proiect.
Instalează DevSuite Pro gratuit și deblochează peste 39 de instrumente pentru dezvoltatori în browserul tău.
