Alle Schriften auflisten scannt jede Webseite und präsentiert ein vollständiges Inventar jeder verwendeten Schriftfamilie — Web-Schriften von CDNs, selbst gehostete Schriften und System-Schrift-Fallbacks. Jede Schrift zeigt eine Live-Textvorschau, die geladenen Schriftstärken und -stile, die Anzahl der Elemente, die sie verwenden, und Ein-Klick-Kopieren der CSS-Schriftfamilien-Deklaration.
Die Identifizierung von Schriften auf einer Website, die Sie bewundern, erforderte früher das Inspizieren von Elementen eins nach dem anderen in DevTools, das Prüfen der berechneten font-family-Eigenschaft oder die Verwendung von Browser-Erweiterungen, die jeweils nur eine Schrift erkennen. Alle Schriften auflisten gibt Ihnen das vollständige Bild in einer Ansicht — jede geladene und auf der Seite verwendete Schrift, mit Live-Textbeispielen, die genau zeigen, wie jede Schrift gerendert wird. Das Tool unterscheidet zwischen Web-Schriften (über @font-face oder Google Fonts geladen) und System-Schriften, zeigt den vollständigen Schriftfamilien-Stack. Für jede Schrift sehen Sie, welche Schriftstärken geladen sind, welche Elemente sie verwenden und welche Schriftgrößen angewendet werden. Klicken Sie auf eine Schrift, um ihre CSS-Deklaration zu kopieren — bereit zum Einfügen in Ihr eigenes Projekt.
Listet jede font-family auf, die tatsächlich auf der Seite gerendert wird, einschließlich Web-Schriften von Google Fonts, Adobe Fonts oder benutzerdefinierten @font-face-Deklarationen, und System-Schrift-Fallbacks. Zeigt die Gesamtzahl der gefundenen einzigartigen Schriftfamilien.
Jede Schrift wird mit einem Live-Textbeispiel angezeigt, das mit der tatsächlich auf der Seite geladenen Schriftdatei gerendert wird. Sie sehen echtes Rendering — keine generische Vorschau.
Für jede Schrift sehen Sie, welche Schriftstärken geladen sind (Regular 400, Medium 500, SemiBold 600, Bold 700) und ob Kursiv-Varianten verfügbar sind. Hilft Ihnen, die geladene Teilmenge der Schrift zu verstehen.
Sehen Sie, wie viele Elemente auf der Seite jede Schrift verwenden. Die meistgenutzte Schrift wird zuerst aufgelistet. Wissen Sie, welche Schriften primär (Fließtext) und welche sekundär (nur auf wenigen Elementen verwendet) sind.
Klicken Sie auf einen Schrifteintrag, um seine vollständige CSS-Schriftfamilien-Deklaration (z. B. font-family: Inter, sans-serif) in die Zwischenablage zu kopieren. Bereit zum direkten Einfügen in Ihr Stylesheet.
Jede Schrift zeigt ihre Quelle: Google Fonts (mit der spezifischen URL), Adobe Fonts, selbst gehostet (mit der @font-face-URL) oder System-Schrift. Wissen Sie genau, woher jede Schrift kommt.
Besuchen Sie eine Website mit schöner Typografie und sehen Sie sofort jede Schrift, die sie verwendet — Namen, Schriftstärken und woher sie kommen. Kein Rätselraten mehr oder unzuverlässige Schrift-Identifikationstools.
Wie viele Schriften lädt Ihre Seite? Gibt es ungenutzte Schriften, die heruntergeladen, aber nicht angewendet werden? Alle Schriften auflisten zeigt die tatsächliche Nutzung — wenn eine geladene Schrift 0 Elemente hat, die sie verwenden, ist das verschwendete Bandbreite.
Dokumentieren Sie die Typografie Ihres Projekts, indem Sie Alle Schriften auflisten auf jeder Seite ausführen. Überprüfen Sie, dass die richtigen Schriften und Schriftstärken konsistent über die Site verwendet werden — fangen Sie abweichende font-family-Deklarationen ab.
Eine Schrift identifiziert, die Ihnen gefällt, aber es ist eine kostenpflichtige Schrift? Kopieren Sie den Schriftnamen und suchen Sie nach kostenlosen Alternativen mit ähnlichen Eigenschaften. Die Live-Vorschau hilft Ihnen, sich genau zu erinnern, wie sie aussah.
Führen Sie Alle Schriften auflisten auf derselben Seite in verschiedenen Browsern aus, um zu überprüfen, dass dieselben Schriften überall gerendert werden. System-Schrift-Stacks werden auf verschiedenen Betriebssystemen unterschiedlich aufgelöst — fangen Sie Inkonsistenzen ab.
Öffnen Sie das DevSuite Pro Floating Dock und klicken Sie auf das Symbol Alle Schriften auflisten. Das Tool scannt die berechneten Stile und @font-face-Regeln der Seite.
Ein Panel zeigt alle auf der Seite gefundenen Schriften, sortiert nach Nutzungshäufigkeit. Jeder Eintrag zeigt den Schriftnamen, Vorschautext, Schriftstärken und Elementanzahl.
Scrollen Sie durch die Live-Vorschauen, um zu sehen, wie jede Schrift rendert. Vergleichen Sie die Überschriftsschrift der Seite mit der Fließtext-Schrift und der Akzent-Schrift.
Klicken Sie auf einen Schrifteintrag, um seine font-family CSS-Deklaration zu kopieren. Klicken Sie auf den Quellenlink, um die Herkunft der Schrift zu besuchen (Google Fonts-Seite, CDN-URL usw.).
Fügen Sie die Schriftfamilien-Deklaration in Ihr CSS ein und laden Sie die Schrift von der gleichen Quelle, um sie in Ihrem eigenen Projekt zu verwenden.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 39+ Entwickler-Tools für Ihren Browser frei.
