Sie haben es sicher schon erlebt: Sie surfen auf einer Website und bleiben plötzlich hängen. Die Schriftart in der Überschrift ist so gelungen, dass Sie sich sofort ausmalen, wie sie in Ihrem eigenen Projekt wirken würde. Aber wie heißt sie? Der Seitenbetreiber hat nicht geantwortet, das CSS im Quellcode ist verschleiert, und die Google-Suche nach „schöne Serifenschrift mit komischem G" kann bis zum Morgen dauern.

Designer tappen ständig in diese Falle. Gigabytes an Sammlungen in der Hoffnung auf einen Treffer zu durchforsten, gleicht einer Lotterie. Und was, wenn die Schrift dort gar nicht gelistet ist?

Zum Glück bietet uns das Jahr 2026 eine Reihe von Werkzeugen, die das Problem in Sekunden lösen. Manche arbeiten mit hochgeladenen Bildern, andere direkt auf live geschalteten Seiten. Wir stellen 9 Wege vor, eine Schriftart zu identifizieren: von klassischen Diensten bis hin zu Bookmarklets, die null Megabyte wiegen.

💡 Kurzer Überblick:

• Laden Sie einen Screenshot mit Text bei WhatTheFont oder WhatFontIs hoch und erhalten Sie den Schriftnamen (oft mit einer kostenlosen Alternative).
• Installieren Sie die Erweiterung Fonts Ninja oder WhatFont, fahren Sie mit dem Cursor über Text auf einer Website und sehen Sie Name, Größe, Zeilenhöhe und Farbe.
• Haben Sie nicht einmal einen Screenshot, öffnen Sie Identifont, beantworten Sie 5-10 Fragen zu Buchstabenformen und erhalten Sie einen Treffer.
• Haben Sie die Schrift gefunden, binden Sie sie per CSS @font-face (oder einem Plugin für WordPress) auf Ihrer Website ein und nutzen Sie sie.

Online-Dienste: Schrifterkennung anhand hochgeladener Bilder

Diese vier Werkzeuge arbeiten nach einem einheitlichen Prinzip: Sie geben ihnen ein Bild mit Text, und sie gleichen es mit einer Datenbank von Hunderttausenden Schriften ab und liefern Treffer zurück.

1. WhatTheFont, der Goldstandard von MyFonts

WhatTheFont von MyFonts ist der treffsicherste Schrifterkenner im Jahr 2026. Unter der Haube arbeitet Deep Learning auf Basis einer Datenbank mit über 233.000 Schriftstilen. Laden Sie ein Bild hoch, klicken Sie auf den Text und erhalten Sie eine Liste von Treffern. Die Datenbank ist eher auf kommerzielle Schriften ausgerichtet, bietet aber fast immer auch kostenlose Alternativen an.

Vorteile: hervorragende Treffsicherheit bei Standardschriften, mobile App für iOS und Android, keine Registrierung erforderlich. Nachteile: schwach bei handgeschriebenen und stark stilisierten Schriften, der integrierte Zuschnitt beschneidet gelegentlich Ober- und Unterlängen.

🔗 WhatTheFont auf MyFonts

2. WhatFontIs, größte Datenbank (über 900.000 Schriften)

WhatFontIs unterhält die größte Datenbank mit über 900.000 Schriften. Nutzen Sie diesen Dienst als zweiten Anlauf, falls WhatTheFont kein überzeugendes Ergebnis geliefert hat.

Hauptmerkmal: die automatische Auswahl kostenloser Alternativen von Google Fonts zu kostenpflichtigen Treffern. Für das Budget eines Webprojekts bedeutet das eine Stunde gesparter Zeit.

Vorteile: größter Index, Vorschläge für kostenlose Alternativen, Browser-Erweiterung. Nachteile: die kostenlose Version ist mit Werbung überfrachtet, Sie müssen vor der Suche manuell Symbole markieren.

🔗 WhatFontIs

3. Fontspring Matcherator, Treffsicherheit bei OpenType

Der Fontspring Matcherator ist ein Favorit von Designern, die mit unabhängigen Foundries arbeiten. Anders als WhatTheFont (MyFonts-Katalog) deckt der Matcherator Indie-Schriften ab, erkennt OpenType-Features (Ligaturen, Alternativglyphen) und unterstützt Drag-and-drop.

Vorteile: kostenlos, stark bei Webfonts, direkter Vergleich von Treffern. Nachteile: kleinere Datenbank als MyFonts, empfindlich gegenüber Bildqualität.

🔗 Fontspring Matcherator

4. Font Squirrel, kostenlose Schriften und keine Werbung

Font Squirrel hat sich einen Namen mit der Kuratierung kostenloser Schriften für die kommerzielle Nutzung gemacht. Der Matcherator ist maximal minimalistisch: hochladen, zuschneiden, Ergebnisse erhalten. Keine Werbung, keine Pop-ups. Das Markenzeichen ist die Bildrotation: Steht die Schrift schräg, meistert Font Squirrel das, wo andere scheitern.

Vorteile: aufgeräumteste Oberfläche, kostenlose Schriften, schnelle Ergebnisse. Nachteile: Die Datenbank ist klein, findet fast nie kommerzielle Schriften.

🔗 Font Squirrel Matcherator

Browser-Erweiterungen: Schriften direkt auf Websites identifizieren

Online-Dienste eignen sich gut für Bilder. Wenn die Schrift aber direkt vor Ihnen auf einer Live-Webseite steht, liefern Browser-Erweiterungen die Antwort in Sekunden. Keine Screenshots, keine neuen Tabs.

5. Fonts Ninja, testen, kaufen, herunterladen

Fonts Ninja (ehemals FontFaceNinja) ist der unangefochtene Marktführer unter den Browser-Schriftidentifikatoren. Die Erweiterung ist für Chrome, Firefox, Safari und Edge verfügbar.

Fahren Sie mit dem Cursor über Text, sehen Sie Schriftname, Größe, Zeilenhöhe, Farbe und Buchstabenabstand. Vor allem aber erlaubt Ihnen Fonts Ninja, die Schrift auszuprobieren: Geben Sie Ihren eigenen Text ein und sehen Sie ihn in Echtzeit in genau dieser Schrift. Und wenn sie Ihnen gefällt, laden Sie sofort die kostenlose Version herunter oder gehen zum Kauf der kommerziellen über.

Bonus: ein Masken-Button, der sämtliche Werbung und Bilder auf der Seite ausblendet und nur die Typografie in Reinform übrig lässt. Für einen Designer, der Layout beurteilt, ist das von unschätzbarem Wert.

Vorteile: komplettes Set, identifizieren, ausprobieren, herunterladen; funktioniert auf 4 Browsern. Nachteile: für erweiterte Filter (Buchstabenformen, Lizenztyp) benötigen Sie eine Registrierung.

🔗 Fonts Ninja im Chrome Web Store

6. WhatFont, mit einem Blick alles erfahren

WhatFont ist eine von Wired empfohlene und von Webentwicklern wegen ihrer Einfachheit geschätzte Erweiterung. Verfügbar für Chrome und Firefox.

Fahren Sie mit dem Cursor darüber, der Schriftname erscheint. Klicken Sie, erhalten Sie eine vollständige Übersicht der CSS-Eigenschaften: Familie, Stärke, Größe, Zeilenhöhe, Farbe im HEX-Format. Das ist nicht nur ein Identifikator, sondern ein Typografie-Inspektor. Stammt die Schrift aus dem Google-Fonts-Katalog, liefert WhatFont einen direkten Download-Link.

Vorteile: sofortiges Ergebnis, tiefgehende CSS-Analyse, Verlinkungen zu Google Fonts. Nachteile: identifiziert keine Schriften in Bildern (nur Live-Text auf der Seite), erlaubt kein Ausprobieren der Schrift mit eigenem Text.

🔗 WhatFont im Chrome Web Store

7. Typ.io, Schriftkombinationen und Inspiration

Typ.io löst die Aufgabe einen Schritt weiter: Es genügt nicht, die Schrift zu identifizieren, Sie möchten verstehen, womit sie harmoniert. Nach der Installation der Erweiterung erscheint ein „T"-Button in der Browserecke. Klicken Sie darauf, und Sie sehen alle Schriften der Seite als separate Liste. Klicken Sie auf einen Namen, gelangen Sie zur Schriftkarte mit Kombinationsbeispielen: „Diese Schrift wird verwendet zusammen mit..."

Die Typ.io-Seite selbst ist eine Datenbank realer Designentscheidungen: Die Community lädt Screenshots von Websites mit Aufschlüsselungen der Schriftkombinationen hoch. Für alle, die eine Schrift nicht nur finden, sondern den Kontext ihrer Verwendung verstehen möchten.

Vorteile: Auswahl von Schriftkombinationen, Datenbank mit realen Beispielen. Nachteile: Die Erweiterung zeigt nur Schriftnamen (ohne CSS-Details), die volle Funktionalität erfordert eine Registrierung.

🔗 Typ.io

8. Fount, ein Bookmarklet, das nichts wiegt

Fount ist keine Erweiterung, sondern ein Bookmarklet. Sie fügen einen Button zu Ihren Browser-Lesezeichen hinzu, gehen auf eine beliebige Seite, klicken dieses Lesezeichen, und der Cursor wird zum Fadenkreuz. Klicken Sie auf Text, erscheint ein Fenster mit Schriftname, Größe, Stärke und Stil. Klicken Sie das Lesezeichen erneut, um den Modus auszuschalten.

Die ideale Wahl für alle, die ihren Browser nicht mit Erweiterungen überladen möchten. Funktioniert in Safari, Chrome, Firefox und IE8+. Benötigt keine Updates, sammelt keine Daten, nutzt keine Hintergrundprozesse. Es funktioniert einfach.

Vorteile: extrem leichtgewichtig, plattformübergreifend, nichts zu installieren. Nachteile: identifiziert nur, was tatsächlich im Font-Stack gerendert wurde (nicht das, was im CSS vorgesehen ist), keine Details wie Farbe.

🔗 Fount, Bookmarklet hinzufügen

Spezielle Methode: wenn weder Bild noch Website vorliegen

9. Identifont, Schriften anhand der Beschreibung identifizieren

Identifont ist das älteste Werkzeug in dieser Sammlung (seit 2000), aber nach wie vor unverzichtbar. Es akzeptiert weder Bilder noch scannt es Websites. Stattdessen stellt es Fragen: Hat der Buchstabe „Q" Serifen? Sind die Schlaufen des kleinen „g" verbunden? Wie sieht das „&"-Zeichen aus?

Sie beantworten 5 bis 10 Fragen, Identifont grenzt den Kreis ein und liefert einen Treffer. Das klingt archaisch, ist aber die einzige funktionierende Methode, wenn Sie weder einen Screenshot noch eine URL haben, sondern nur eine Erinnerung daran, wie die Schrift aussah.

Vorteile: funktioniert ganz ohne Bild, schult das typografische Auge. Nachteile: langsam (5+ Minuten für eine Suche), das Seitendesign wurde seit Jahrzehnten nicht aktualisiert, die Datenbank ist modernen Diensten unterlegen.

🔗 Identifont

Vergleichstabelle: Was soll man wählen

Es gibt kein einzelnes perfektes Tool. Profi-Schema: Bild bei WhatTheFont hochladen, zweiten Durchlauf bei Fontspring Matcherator, und die Schnittmenge betrachten. Der Name, der sich wiederholt, ist die Wahrheit.

Wie man die gefundene Schrift auf einer Website einbindet

Schrift identifiziert, Datei heruntergeladen, jetzt müssen Sie sie auf der Website einbinden. Die universellste Methode ist @font-face.

Schritt 1. Laden Sie die Schrift im .ttf- oder .otf-Format herunter.

Schritt 2. Konvertieren Sie sie in Web-Formate mit dem Font Squirrel Webfont Generator. Das Ergebnis liefert Ihnen .woff, .woff2 und .ttf sowie eine fertige CSS-Datei. WOFF2 ist 2026 das Hauptformat für das Web, es wird von 98% der Browser unterstützt.

Schritt 3. Laden Sie die Schriftdateien per FTP oder über den Dateimanager des Hostings auf den Server, in den Ordner /wp-content/themes/your-theme/fonts/.

Schritt 4. Schreiben Sie @font-face in CSS:

1
@font-face {
2
  font-family: 'MyCustomFont';
3
  src: url('fonts/MyCustomFont.woff2') format('woff2'),
4
       url('fonts/MyCustomFont.woff') format('woff');
5
  font-weight: 400;
6
  font-style: normal;
7
  font-display: swap;
8
}

Die Direktive font-display: swap ist entscheidend: Der Browser zeigt zuerst die Systemschrift an, und wenn die benutzerdefinierte geladen ist, tauscht er sie aus. Ohne sie bleibt der Text unsichtbar, bis die Schrift heruntergeladen ist.

Schritt 5. Wenden Sie die Schrift auf Elemente an:

1
h1, h2, h3 {
2
  font-family: 'MyCustomFont', sans-serif;
3
}

WordPress: Das Plugin Custom Fonts bietet eine visuelle Oberfläche zum Hochladen beliebiger Schriften. Oder schreiben Sie @font-face in die functions.php des Child-Themes über den wp_head-Hook.

Machen Sie vor jeder Bearbeitung von Theme-Dateien ein Backup. Ein Fehler in @font-face oder functions.php kann die Website zum Absturz bringen.

Sehen Sie sich ein kurzes Video an, das den gesamten Prozess zeigt, vom Screenshot bis zum fertigen Schriftnamen, mit WhatTheFont:

⁉️🤔 Häufig gestellte Fragen

Warum findet WhatTheFont meine Schrift nicht?

Drei Hauptgründe: schlechte Bildqualität, schräg gedrehter Text oder die Schrift ist handgeschrieben. Machen Sie einen größeren Screenshot, auf kontrastreichem Hintergrund und horizontal. Hat das nicht geholfen, versuchen Sie Fontspring Matcherator und WhatFontIs. Bei handgeschriebenen Schriften existiert oft prinzipiell keine exakte Übereinstimmung: Sie sind Unikate.

Kann man eine Schrift aus einer PDF-Datei identifizieren?

Ja, wenn der Text nicht gerastert ist. Öffnen Sie das PDF, markieren Sie den Text und machen Sie einen Screenshot. Laden Sie ihn bei einem beliebigen Dienst der ersten vier hoch. Bei Scans hängt das Ergebnis von der Auflösung ab: 150 DPI und höher liefern akzeptable Genauigkeit.

Die Schrift wurde identifiziert, aber sie ist kostenpflichtig. Wo bekommt man eine kostenlose Alternative?

WhatFontIs bietet automatisch kostenlose Alternativen von Google Fonts unter jedem kostenpflichtigen Treffer an. Manuell: Gehen Sie zu fonts.google.com, geben Sie den Namen der gefundenen Schrift ein und sehen Sie sich visuell ähnliche an. Kostenlose Ersatzschriften: mit Serifen Playfair Display, Lora, Merriweather; serifenlos Inter, Roboto, Manrope.

Welches Schriftformat soll man 2026 für das Web verwenden?

WOFF2 ist das Hauptformat, WOFF ist Fallback für ältere Browser. TTF und OTF sollten im Web nicht verwendet werden: Sie wiegen ohne Komprimierung das 2- bis 3-Fache. Der Font Squirrel Generator (oben erwähnt) konvertiert alles mit einem Klick in WOFF2+WOFF.

Was man 2026 verwenden sollte: Abschließende Aufschlüsselung

Neun Tools bedeuten nicht, dass Sie alle verwenden müssen. Hier eine einfache Auswahlmatrix:

• Sie haben einen Screenshot → WhatTheFont, dann Fontspring Matcherator zur Gegenprüfung.
• Sie brauchen eine kostenlose Alternative → WhatFontIs (automatische Auswahl aus Google Fonts).
• Schrift auf einer Live-Website → Fonts Ninja oder WhatFont (Erweiterung in 5 Sekunden).
• Nichts verfügbar, nur Erinnerung → Identifont.
• Sie möchten keine Erweiterungen installieren → Fount (Bookmarklet in den Lesezeichen).

Und wenn kein Tool funktioniert hat, öffnen Sie DevTools (F12 → Untersuchen → Berechnet → font-family). Unbequem, aber zuverlässig. Und niemand hat das Subreddit r/identifythisfont abgeschafft: Live-Designer nennen die Schrift in ein paar Minuten.

Eine gute Schrift verändert die Wahrnehmung einer Website schneller als das Umgestalten von drei Blöcken. Jetzt haben Sie alles, was Sie brauchen, um genau diese eine zu finden und in Ihr Projekt einzubinden.