Kostenloser Webschriften-Detektor

Der Web Font Detector ist ein kostenloses Online-Tool, das alle in HTML oder CSS verwendeten Schriftarten extrahiert und Google Fonts, Systemschriftarten sowie Webschriftarten erkennt. Es läuft vollständig in deinem Browser, ohne Installation oder Anmeldung.

Füge deinen CSS- oder HTML-Quelltext ein, und das Tool extrahiert alle font-family-Deklarationen und @font-face-Regeln.

Ja – es erkennt die CDN-URLs von Google Fonts und ordnet sie den Schriftnamen zu.

Ja, völlig kostenlos.

Absolut. Der Web Font Detector verarbeitet alles clientseitig in deinem Browser. Es werden keine Daten auf einen Server hochgeladen oder dort gespeichert. Deine Inhalte bleiben jederzeit privat auf deinem Gerät.

Ja, der Web Font Detector ist vollständig responsiv und funktioniert auf Smartphones und Tablets. Du kannst ihn auf jedem Gerät mit einem modernen Webbrowser nutzen, ohne eine App herunterzuladen.

Es ist kein Konto und keine Registrierung erforderlich. Öffne einfach den Web Font Detector in deinem Browser und beginne sofort mit der Nutzung. Es gibt keine Anmeldeschranken oder Nutzungsbeschränkungen.

Der Web Font Detector funktioniert in allen modernen Browsern, darunter Chrome, Firefox, Safari, Edge und Opera. Für das beste Erlebnis verwende die neueste Version deines bevorzugten Browsers.

Eine Systemschrift ist bereits im Betriebssystem des Besuchers vorhanden — Arial, Helvetica, Georgia, Segoe UI sowie die generischen Schlüsselwörter serif, sans-serif und monospace — und lädt daher sofort, ohne dass etwas heruntergeladen werden muss. Ein Web-Font ist eine Datei, die die Website selbst ausliefert, deklariert in einer @font-face-Regel und zusammen mit der Seite gehostet; der Browser muss diese Datei erst laden, bevor der Text angezeigt wird. Eine Google Font ist ein Web-Font, der über Googles CDN unter fonts.googleapis.com bereitgestellt wird, Open Source und im Rahmen der Lizenz kostenlos nutzbar. Der Detektor markiert jede gefundene Schriftart als Google, System, Custom oder Unbekannt, damit du auf einen Blick erkennst, welche einen Download kosten und welche kostenlos vom Gerät kommen. Füge dein CSS oder HTML ein, und das Übersichtsfeld zählt jede Kategorie für dich.

Öffne die Seite und besorge dir den Quelltext — nutze die Funktion „Seitenquelltext anzeigen“ oder die DevTools deines Browsers, um das Markup zu kopieren, oder kopiere das Stylesheet direkt aus einem Code-Editor — und füge es dann in den Detektor ein. Der Parser durchsucht jede font-family-Deklaration, die font-Kurzschreibweise wie „font: bold 16px/1.5 Georgia, serif“, @font-face-Blöcke sowie Google-Fonts-@import- und <link>-URLs und löst die Namen zu einer deduplizierten Liste auf. Jeder Eintrag zeigt den Selektor oder Kontext, in dem er aufgetaucht ist, sodass du siehst, ob eine Schrift im Fließtext, in einer h1 oder in einem Inline-Style verwendet wird. Die exakten Familiennamen zu lesen ist besser als eine Schriftart nach Augenmaß zu raten — aber denk daran, dass Web-Fonts lizenzierte Assets sind, also die Lizenz prüfen, bevor du eine weiterverwendest. Füge oben den Quelltext einer Seite ein, um in Sekunden ihre vollständige Font-Liste zu sehen.

Eine Schrift wird als Unbekannt markiert, wenn ihr Name nicht auf der eingebauten Liste von rund fünfzig gängigen Systemschriften steht und sie weder einer Google-Fonts-CDN-URL noch einer @font-face-Regel im eingefügten Quelltext zugeordnet werden konnte. In der Praxis bedeutet das meist einen lizenzierten Web-Font, der anders geladen wird, eine selbst gehostete Schrift, deren @font-face-Block nicht im eingefügten Ausschnitt enthalten war, oder schlicht einen Tippfehler im Familiennamen. Das ist kein Fehler — das Tool teilt dir mit, dass es eine echte, benannte Schriftart gefunden hat, aber nicht bestätigen konnte, woher sie stammt. Wenn eine Schrift, die du als Custom erwartet hättest, als Unbekannt erscheint, füge mehr vom Stylesheet ein, damit der passende @font-face-Block enthalten ist. Füge dein vollständiges CSS ein, um jede Schrift so genau wie möglich klassifiziert zu bekommen.

Ein Font-Stack ist der vollständige font-family-Wert — eine primäre Schriftart, gefolgt von Fallbacks, die der Browser der Reihe nach ausprobiert, etwa „Inter, -apple-system, Arial, sans-serif“. Ein Non-System-Font-Stack ist diese Liste ohne die generischen System-Fallbacks, sodass nur die Schriftarten übrig bleiben, die eine Seite tatsächlich als Web-Fonts lädt. Der Detektor erstellt diesen Stack automatisch und bietet ihn zum Ein-Klick-Kopieren an, was praktisch ist, wenn du die echten Schriftarten eines Layouts wiederverwenden willst, ohne die Fallback-Kette mitzuschleppen, oder wenn du genau prüfen willst, von welchen Fonts eine Seite abhängt. Einen Stack auf die wirklich benötigten Fonts zu kürzen, ist zudem ein Performance-Gewinn, da jeder Web-Font eine Datei ist, die der Browser herunterladen muss. Füge deinen Quelltext ein und kopiere den fertigen Non-System-Stack aus dem Ergebnis.

Es erkennt beides, und noch mehr. Der Parser verarbeitet vier Arten von Font-Referenzen und führt sie in einer Liste zusammen: @font-face-Blöcke für selbst gehostete oder eigene Fonts, erfasst mit ihrem deklarierten Familiennamen und der src-URL, damit du siehst, woher die Datei geladen wird; Google-Fonts-@import-url(...)-Regeln und <link>-Tags, die auf fonts.googleapis.com verweisen, mit Namen aus dem family-Parameter der URL; reguläre font-family-Deklarationen in jeder CSS-Regel oder jedem Inline-Style; sowie die font-Kurzschreibweise, bei der Größe und Familie zusammen geschrieben sind. Google Fonts erhalten einen direkten Link zu ihrer Musterseite, und @font-face-Schriften werden mit ihrer Quell-URL aufgeführt. Da alles lokal in deinem Browser läuft, funktioniert es mit eingefügtem Quelltext statt mit einer Live-URL. Füge ein Stylesheet ein, um jede Schrift zu sehen, egal wie sie geladen wird.