List All Fonts scant elke webpagina en presenteert een volledige inventaris van elke gebruikte lettertypefamilie — weblettertypen geladen van CDN's, zelf gehoste lettertypen en systeem lettertypefallbacks. Elk lettertype toont een live tekstpreview, de geladen gewichten en stijlen, het aantal elementen dat het gebruikt en eenkliks kopiëren voor de CSS font-family verklaring.
Lettertypen op een website die u bewondert identificeren, vereiste vroeger het één voor één inspecteren van elementen in DevTools, het controleren van de berekende font-family eigenschap of het gebruik van browserextensies die slechts één lettertype tegelijk detecteerden. List All Fonts geeft u het volledige beeld in één weergave — elk lettertype dat op de pagina is geladen en gebruikt, met live tekstvoorbeelden die precies laten zien hoe elk lettertype wordt weergegeven. Het gereedschap maakt onderscheid tussen weblettertypen (geladen via @font-face of Google Fonts) en systeemlettertypen (Arial, Helvetica, Georgia, enz.), met de volledige font-family-stapel. Voor elk lettertype ziet u welke gewichten zijn geladen (400, 600, 700), welke elementen het gebruiken en welke lettertypegroottes worden toegepast. Klik op een willekeurig lettertype om de CSS-verklaring ervan te kopiëren — klaar om in uw eigen project in te plakken. De live preview maakt gebruik van de werkelijke lettertypeweergave van de pagina, niet van een generieke preview, dus u ziet precies hoe het lettertype eruitziet met de grootten en gewichten die op de site worden gebruikt.
Geeft alle lettertypefamilies die werkelijk op de pagina worden weergegeven, inclusief weblettertypen van Google Fonts, Adobe Fonts of aangepaste @font-face verklaringen en systeem lettertypefallbacks. Toont het totale aantal unieke lettertypefamilies gevonden.
Elk lettertype wordt weergegeven met een live tekstvoorbeeld ("The quick brown fox jumps over the lazy dog") weergegeven met het werkelijke lettertypebestand dat op de pagina is geladen. U ziet echte rendering — geen generieke preview.
Voor elk lettertype ziet u welke gewichten zijn geladen (Regular 400, Medium 500, SemiBold 600, Bold 700) en of cursieve varianten beschikbaar zijn. Helpt u de geladen subset van het lettertype te begrijpen.
Zie hoeveel elementen op de pagina elk lettertype gebruiken. Het meest gebruikte lettertype wordt het eerst weergegeven. Weet welke lettertypen primair zijn (lichaamstekst) en welke secundair zijn (gebruikt op slechts enkele elementen).
Klik op een willekeurig lettertypeinvoer om de volledige CSS font-family verklaring ervan (bijv. font-family: 'Inter', sans-serif) naar uw klembord te kopiëren. Klaar om rechtstreeks in uw stylesheet in te plakken.
Elk lettertype toont de bron ervan: Google Fonts (met de specifieke URL), Adobe Fonts, zelf gehost (met de @font-face URL) of systeemlettertype. Weet precies waar elk lettertype vandaan komt.
Bezoek een website met mooie typografie en zie onmiddellijk elk lettertype dat het gebruikt — namen, gewichten en waar zij vandaan komen. Geen gissen meer naar "welk lettertype is dat?" of het gebruik van onbetrouwbare lettertypeidentificatietools.
Hoeveel lettertypen laadt uw pagina? Zijn er ongebruikte lettertypen die worden gedownload, maar niet worden toegepast? List All Fonts toont werkelijk gebruik — als een geladen lettertype 0 elementen ervan gebruikt, is het verspilde bandbreedte.
Documenteer de typografie van uw project door List All Fonts op elke pagina uit te voeren. Verifieer dat de juiste lettertypen en gewichten consistent op de site worden gebruikt — vang afwijkende font-family verklaringen.
Een lettertype geïdentificeerd dat u leuk vindt, maar het is een betaald lettertype? Kopieer de lettertypennaam en zoek naar gratis alternatieven met soortgelijke kenmerken. De live preview helpt u zich precies te herinneren hoe het eruitzag.
Voer List All Fonts uit op dezelfde pagina in verschillende browsers om te verifiëren dat dezelfde lettertypen overal worden weergegeven. Systeemlettertypestapels worden anders opgelost in verschillende besturingssystemen — vang inconsistenties.
Open het floating dock van DevSuite Pro en klik op het List All Fonts-pictogram. Het gereedschap scant de berekende stijlen en @font-face regels van de pagina.
Een paneel geeft alle lettertypen weer die op de pagina zijn gevonden, gesorteerd op gebruiksfrequentie. Elk item toont de lettertypennaam, voorbeeldtekst, gewichten en elemententelling.
Blader door de live voorbeelden om te zien hoe elk lettertype wordt weergegeven. Vergelijk het koplettertype van de pagina versus lichaamstekst versus accentlettertype.
Klik op een willekeurig lettertypeinvoer om de CSS font-family verklaring ervan te kopiëren. Klik op de bronkoppeling om naar de herkomst van het lettertype te gaan (Google Fonts-pagina, CDN-URL, enz.).
Plak de font-family verklaring in uw CSS en laad het lettertype van dezelfde bron om het in uw eigen project te gebruiken.
Installeer DevSuite Pro gratis en ontgrendel 64+ ontwikkelaarstools voor uw browser.
