Eine Schriftart ist nicht einfach nur „hübsche Buchstaben". Sie steuert die Aufmerksamkeit, bestimmt die Stimmung und beeinflusst unmittelbar die Lesbarkeit. Eine schlecht gewählte Schrift vertreibt Besucher innerhalb von Sekunden von einer Website, selbst wenn der Inhalt hervorragend ist.

Manchmal besuchen Sie eine Website und stellen fest, dass der Text teuer und stilvoll wirkt. Sie möchten herausfinden, welche Schriftart verwendet wird, sei es für Ihr eigenes Projekt oder aus rein beruflicher Neugier. Doch Seitenbetreiber kennzeichnen ihre Typografie nicht, und manche benennen Schriften in CSS absichtlich um, um die Identifizierung zu erschweren.

Gute Nachricht: Die Schriftart einer beliebigen Website zu identifizieren, ist möglich. Sie müssen weder Frontend-Entwickler noch Designer sein; drei Ansätze decken praktisch alle Szenarien ab. Vom integrierten Inspektor des Browsers über Ein-Klick-Erweiterungen bis hin zu Diensten für Schriften in Bildern.

💡 Kurzüberblick:

• Öffnen Sie die DevTools (F12) und suchen Sie im Tab „Berechnet" nach font-family

• Installieren Sie Whatfont oder Fontanello und fahren Sie mit der Maus über Text

• Laden Sie einen Screenshot bei Font Squirrel Matcherator oder WhatTheFont hoch

1. Integrierter Browser-Inspektor

Die am einfachsten zugängliche Methode, die keinerlei Installation erfordert. Jeder moderne Browser (Chrome, Firefox, Edge, Safari) enthält Entwicklertools (DevTools). Darunter befindet sich ein Inspektor, der die CSS-Eigenschaften für jedes Element auf der Seite anzeigt, einschließlich der Schriftart.

So öffnen Sie ihn. Unter Windows drücken Sie Ctrl + Shift + I; auf dem Mac Cmd + Shift + I. Oder klicken Sie mit der rechten Maustaste auf den Text und wählen Sie „Untersuchen" / „Element untersuchen". Das DevTools-Panel öffnet sich.

Auf der linken Seite des Panels sehen Sie die HTML-Struktur, auf der rechten Seite die CSS-Regeln. Der schnellste Weg zur Schriftart führt jedoch über den Tab Berechnet. Blättern Sie in der Liste der Eigenschaften zu font-family; dies ist der Name der Schrift. Daneben zeigt der Browser die konkrete Schriftdatei an, die auf der Seite dargestellt wird.

Es gibt auch einen alternativen Weg für diejenigen, die alle Schriften der Seite auf einmal sehen möchten. Öffnen Sie in den Chrome DevTools den Tab „Anwendung" → Bereich „Frames" → Ordner „Schriftarten". Der Browser zeigt eine Liste aller geladenen Schriftdateien mit ihrer URL und ihrem Format (woff2, ttf) an. Das ist langsamer, offenbart aber, was in @font-face verborgen ist.

Vorteile: kostenlos, benötigt keine Erweiterungen, zeigt den exakten Schriftnamen und seinen Stil (Stärke, Stil, Größe) an. Nachteile: erfordert mehrere Klicks; die Methode funktioniert nicht auf mobilen Geräten.

2. Browser-Erweiterungen

Wenn Sie häufig Schriften prüfen, spart Ihnen eine Erweiterung Stunden. Das Prinzip ist einfach: Sie fahren mit der Maus über Text, und die Erweiterung zeigt den Schriftnamen und seine CSS-Parameter in einem Tooltip an.

2.1 Whatfont

Die beliebteste Lösung in dieser Nische. Empfohlen von Wired, Lifehacker und SwissMiss. Die Installation aus dem Chrome Web Store erfolgt mit einem Klick.

Klicken Sie nach der Installation auf das Erweiterungssymbol oben rechts im Browser, um den Erkennungsmodus zu aktivieren. Wenn Sie nun mit der Maus über einen beliebigen Text fahren, zeigt Whatfont die Schriftart direkt über dem Cursor an. Ein Klick auf den Text öffnet die vollständige Karte: Familie, Stärke, Größe, Zeilenhöhe und Farbe.

Die Erweiterung funktioniert auch unter Firefox und Safari (über einen Port). Kostenlos, keine Registrierung erforderlich, quelloffen auf GitHub.

🔗 Whatfont im Chrome Web Store

2.2 Fontanello

Während Whatfont Informationen beim Überfahren mit der Maus anzeigt, arbeitet Fontanello über einen Rechtsklick. Markieren Sie Text auf einer Website, drücken Sie die rechte Maustaste und wählen Sie Fontanello aus dem Kontextmenü. Es öffnet sich ein Panel mit vollständigen Informationen: Schriftname, Strichstärke, Größe, Farbe und sogar das Kontrastverhältnis des Textes zum Hintergrund (ein Kriterium der Barrierefreiheit).

Fontanello ist verfügbar für Chrome und Firefox. Ein zusätzlicher Vorteil: Die Erweiterung belastet die Seite nicht durch permanentes Tracking; sie wird nur aktiv, wenn Sie sie anfordern.

🔗 Fontanello im Chrome Web Store

2.3 Fonts Ninja

Ein leistungsfähigeres Werkzeug mit einer „Font-DNA"-Funktion: ein proprietärer Algorithmus, der Schriftdateien analysiert, um präzisere Ergebnisse zu liefern. Über die Schrifterkennung beim Überfahren mit der Maus hinaus kann Fonts Ninja gefundene Schriften als Lesezeichen speichern und eine Übersicht aller auf einer Seite verwendeten Schriftarten anzeigen.

Es gibt einen Haken: Lesezeichen und einige Funktionen erfordern eine Registrierung. Die grundlegende Schrifterkennung funktioniert jedoch ohne Konto. Die Erweiterung ist kostenpflichtig (mit einer Testversion), sodass sie eine Überlegung wert ist, wenn Sie professionell mit Typografie arbeiten.

🔗 Fonts Ninja im Chrome Web Store

3. Wie man eine Schrift aus einem Bild identifiziert

Der Inspektor und Erweiterungen sind machtlos, wenn die Schrift Teil eines Bildes ist: ein Logo, Banner oder Meme. Text in einem Bild ist kein HTML-Element, das heißt, er hat keine CSS-Eigenschaften. Für solche Fälle gibt es spezialisierte Dienste.

3.1 Font Squirrel Matcherator

Ein kostenloses, über Jahre bewährtes Werkzeug von Font Squirrel. So funktioniert es:

• Laden Sie einen Screenshot oder ein Textfragment in die Matcherator-Oberfläche hoch
• Wählen Sie den Bereich mit den Buchstaben aus (blauer Marker in der Werkzeugleiste)
• Klicken Sie auf „Matcherate It!"

Der Dienst analysiert die Zeichenformen und liefert eine Liste der ähnlichsten Treffer aus seiner Datenbank. Gibt es keine exakte Übereinstimmung, schlägt er visuell ähnliche Alternativen mit einer prozentualen Ähnlichkeit vor. Es funktioniert sogar mit handgeschriebenen Schriften, solange die Buchstaben sich nicht berühren.

🔗 Font Squirrel Matcherator

3.2 WhatTheFont von MyFonts

WhatTheFont nutzt Deep Learning und eine Datenbank mit mehr als 233.000 Schriften. Laden Sie ein Bild hoch, klicken Sie auf den gewünschten Buchstaben, und der Algorithmus findet Übereinstimmungen. Der wesentliche Vorteil gegenüber Matcherator: WhatTheFont beherrscht verbundene Schriften, bei denen Buchstaben ineinanderfließen. Das ist eine ernstzunehmende technische Fähigkeit, die älteren Diensten fehlt.

Für beste Ergebnisse laden Sie horizontalen Text mit guter Auflösung auf einem kontrastreichen Hintergrund hoch.

🔗 WhatTheFont auf MyFonts

Video: eine Schrift in einer Minute identifizieren

Eine kurze Demonstration, wie Sie die Erweiterung „Identify Font" installieren und eine Schrift auf einer beliebigen Website finden, ohne die DevTools zu öffnen:

⁉️🤔 Häufig gestellte Fragen

Kann man eine Schriftart identifizieren auf einer mobilen Website?

Ja, aber mit Einschränkungen. Erweiterungen sind in mobilen Browsern nicht verfügbar, und die DevTools ebenfalls nicht. Der praktikable Ansatz: Machen Sie einen Screenshot des Textes auf Ihrem Telefon und laden Sie ihn über einen Computer bei WhatTheFont oder Font Squirrel Matcherator hoch. Wenn der Text auf der Website groß und klar ist, erkennt der Dienst die Schrift aus dem Screenshot genauso zuverlässig wie von einem Desktop-Bild.

Was, wenn der Website-Betreiber die Schriftart im CSS umbenannt hat?

Manche Entwickler ändern font-family in den Styles auf einen willkürlichen Namen, obwohl sie tatsächlich eine bestimmte Schriftdatei laden. In diesem Fall zeigt die DevTools-Methode über den Application-Tab (Frames → Fonts) die tatsächlichen URLs der Schriftdateien. Am Dateinamen (zum Beispiel Inter-Regular.woff2) erkennen Sie die Schriftart problemlos. Erweiterungen wie Fonts Ninja mit „DNA-Analyse" umgehen die Umbenennung ebenfalls, indem sie die Datei selbst analysieren und nicht die CSS-Eigenschaft.

Welche Methode ist die genaueste?

Für Text auf einer Seite: die Erweiterung Whatfont oder Fontanello; ein Mouseover und Sie haben den exakten Namen. Für Bilder: WhatTheFont mit seiner neuronalen Netzwerk-Engine ist bei verbundenen und dekorativen Schriften genauer als Matcherator. Für vollständige Sicherheit bei umbenanntem CSS: DevTools → Application → Fonts, dort sehen Sie die tatsächliche URL der Schriftdatei; ein Irrtum ist hier ausgeschlossen.

Muss man für die Schriftidentifikation bezahlen?

Nein. Alle in diesem Artikel genannten Methoden sind kostenlos. DevTools ist im Browser integriert. Whatfont und Fontanello sind kostenlose Erweiterungen mit offenem Quellcode. Font Squirrel Matcherator ist ein kostenloser Webdienst. WhatTheFont ist kostenlos (monetarisiert über Schriftverkäufe, nicht über die Identifikation). Fonts Ninja hat eine kostenpflichtige Version, aber die grundlegende Schrifterkennung funktioniert ohne Bezahlung.

Kann man eine gefundene Schriftart automatisch auf der eigenen Website anwenden?

Technisch ja, rechtlich hängt es jedoch von der Lizenz der Schrift ab. Sie können die Schriftart frei identifizieren. Auf Ihrer eigenen Website nutzen dürfen Sie sie jedoch nur, wenn die Schrift eine offene Lizenz hat (SIL Open Font License, Apache 2.0) oder Sie eine kommerzielle Lizenz erworben haben. Google Fonts, Font Squirrel und Adobe Fonts sind sichere Quellen mit klaren Nutzungsbedingungen.

Welche Methode zur Schriftidentifikation soll man wählen

Wenn Sie sich diesem Thema zum ersten Mal nähern, beginnen Sie mit den DevTools. Es ist kostenlos, dauert 30 Sekunden und erfordert keine Installation. Für die regelmäßige Arbeit mit Typografie installieren Sie Whatfont: ein Mouseover statt vier Klicks.

Wenn eine Schrift in einem Bild versteckt ist, laden Sie einen Screenshot bei WhatTheFont hoch. Es ist der technologisch fortschrittlichste kostenlose bildbasierte Suchdienst. Und wenn die Schriftart im CSS umbenannt wurde, greifen Sie über Application → Fonts in den DevTools auf die Datei zu: Dieser Weg enthüllt die Wahrheit unabhängig von allen Entwicklertricks.

Denken Sie daran: Eine Schriftart zu finden, ist nicht schwierig. Der schwierigere Teil ist, sie korrekt anzuwenden. Prüfen Sie die Lizenz, testen Sie die Lesbarkeit an echtem Inhalt und mischen Sie nicht mehr als zwei Schriftarten in einem einzigen Projekt. Gute Typografie schreit nicht; sie funktioniert.