Sie scrollen durch einen Feed von Websites und plötzlich ist sie da. Die perfekte Schriftart, nach der Sie seit Wochen suchen. Dieser besondere Schwung am kleinen „a" und Proportionen, die den Typografen in Ihnen vor Freude quietschen lassen. Aber der Name? Der Seitenautor hat ihn nicht angegeben, das Durchsuchen des CSS kostet Zeit und der Designer-Support ist im Urlaub.

Eine Schriftart auf dem Bildschirm ist eine CSS-Eigenschaft, kein Bild. Der Browser gibt den Namen, die Strichstärke, die Größe und sogar die Schriftgießerei ehrlich an jeden preis, der weiß, wo er suchen muss. In den letzten Jahren haben sich Schriftidentifikations-Werkzeuge von einem DevTools-Tab zu Erweiterungen entwickelt, die Lizenzpreise anzeigen, kostenlose Alternativen vorschlagen und Fundstücke in einer Sammlung speichern.

In diesem Leitfaden fünf Methoden: von sofort (Rechtsklick) bis fortgeschritten (Analyse der Schriftart-Binärdatei). Keine davon erfordert ein Design-Studium oder ein kostenpflichtiges Abonnement.

💡 Kurzübersicht:

• Fontanello: Rechtsklick, und der Schriftname steht bereits im Kontextmenü (Chrome, Firefox, Edge, iOS)
• WhatFont: Fahren Sie mit dem Cursor über Text, sehen Sie Familie, Größe, Farbe und Bereitstellungsdienst (Chrome, Safari)
• Fonts Ninja: Identifiziert die Schriftart, zeigt den Preis, speichert Fundstücke in Lesezeichen (Chrome)
• Integrierter Inspektor: Universelle Methode für jeden Browser, keine Erweiterungen
• What Can My Font Do?: Laden Sie die Schriftdatei hoch, der Dienst entschlüsselt selbst eine umbenannte Schriftart

Methodenvergleich: Tabelle

1. Fontanello, Schriftart im Kontextmenü

Fontanello, eine Erweiterung, die den Schriftnamen direkt zum Kontextmenü des Browsers hinzufügt. Markieren Sie Text, klicken Sie mit der rechten Maustaste, wählen Sie Fontanello, und Sie sehen nicht nur die Schriftfamilie, sondern auch Strichstärke, Größe, Zeichenabstand und Farbe. Keine zusätzlichen Panels, keine Notwendigkeit, das Werkzeug in der Symbolleiste zu aktivieren.

Die Erweiterung funktioniert in Chrome, Firefox, Edge und auf iOS. Dies ist die schnellste aller existierenden Methoden: buchstäblich eine Aktion. Sie müssen den Cursor nirgendwohin bewegen, nicht zwischen DevTools-Tabs wechseln, Rechtsklick und die Antwort liegt direkt vor Ihnen.

Vorteile:

• Eine Aktion: Rechtsklick und Ergebnis im Kontextmenü
• Unterstützt vier Plattformen: Chrome, Firefox, Edge, iOS
• Zeigt zusätzliche Attribute: Größe, Farbe, Zeichenabstand

Nachteile:

• Identifiziert keine umbenannten Schriften
• Speichert keinen Verlauf gefundener Schriften

Fontanello, die Wahl für alle, die Geschwindigkeit schätzen. Ein Klick, keine Aktivierung, keine überflüssigen Bewegungen.

🔗 Fontanello im Chrome Web Store

2. WhatFont, mit der Maus darüberfahren und erkennen

WhatFont, eine der beliebtesten Erweiterungen zur Schriftidentifikation: drei Millionen Nutzer und eine 4,0-Bewertung im Chrome Web Store. Das Prinzip ist einfach: Klicken Sie auf das WhatFont-Symbol in der Symbolleiste, fahren Sie mit dem Cursor über Text, und über der Seite erscheint ein Panel mit vollständigen Informationen zur Schriftart.

Im Gegensatz zu Fontanello erlaubt WhatFont Ihnen, mehrere Textfragmente gleichzeitig hervorzuheben und Schriften visuell zu vergleichen. Die Erweiterung zeigt Schriftfamilie, Strichstärke, Größe, Zeilenhöhe und Farbe. Ein besonderes Plus: Sie identifiziert die Quelle der Schriftbereitstellung: Google Fonts API, Adobe Fonts (ehemals Typekit) oder lokales @font-face.

Vorteile:

• Drei Millionen Nutzer, stabile und bewährte Erweiterung
• Zeigt den Schriftbereitstellungsdienst: Google Fonts, Adobe Fonts, lokal
• Funktioniert in Chrome und Safari

Nachteile:

• Erfordert einen Klick auf das Symbol zur Aktivierung, eine zusätzliche Aktion im Vergleich zu Fontanello
• Keine Version für Firefox

🔗 WhatFont im Chrome Web Store

3. Fonts Ninja, das Schweizer Taschenmesser für Designer

Fonts Ninja geht über die einfache Schriftidentifikation hinaus. Zusätzlich zum Namen und den CSS-Eigenschaften zeigt die Erweiterung: wie viele Schriftschnitte für die gefundene Schrift verfügbar sind, den Namen der Schriftgießerei, den Lizenzpreis und, was besonders wertvoll ist, eine Liste ähnlicher Schriften.

Das integrierte Lesezeichensystem spart Designern Stunden. Sie haben eine interessante Schriftart auf einer fremden Seite gefunden, direkt aus der Erweiterung in der Sammlung gespeichert und später die Liste mit dem Team geteilt. Die Suche funktioniert nach Glyphenform, Lizenztyp und Preis, praktisch, wenn Sie eine budgetfreundliche Alternative zu einer teuren Schrift benötigen.

Die Erweiterung wird von 900.000 Menschen genutzt, Bewertung 4,4. Funktioniert derzeit nur in Chrome. Von der Größe her ist sie schwerer als WhatFont, 2 MB gegenüber 741 KB, aber die Funktionalität rechtfertigt dies.

Vorteile:

• Zeigt Schriftpreis, Schriftgießerei und ähnliche Alternativen
• Integrierte Lesezeichen für gefundene Schriften
• Suche nach Glyphenform und Lizenztyp

Nachteile:

• Nur Chrome, keine Versionen für Safari und Firefox
• Schwerer als Alternativen: 2 MB gegenüber 741 KB bei WhatFont

🔗 Fonts Ninja im Chrome Web Store

4. Integrierter Inspektor, universelle Methode ohne Erweiterungen

Wenn Sie keine Erweiterungen installieren möchten oder in einem Browser arbeiten, für den es keine gibt, besitzt jeder moderne Browser ein integriertes Werkzeug zur Schriftidentifikation. Dies ist langsamer als Erweiterungen, erfordert aber keinerlei Installation.

Google Chrome. Klicken Sie mit der rechten Maustaste auf den Text und wählen Sie „Untersuchen". Das DevTools-Panel öffnet sich. Im Tab „Styles" finden Sie die Eigenschaft font-family, sie listet alle auf das Element angewendeten Schriften auf. Die erste in der Liste ist die, die gerade dargestellt wird.

Firefox. Firefox hat einen eigenen Tab „Schriften" im Inspektor. Rechtsklick → „Element untersuchen" → gehen Sie zum Tab „Schriften". Sie sehen nicht nur den Schriftnamen, sondern auch Strichstärke, Größe und sogar eine Glyphenvorschau, das hat keine Erweiterung.

Safari. Aktivieren Sie zuerst das Menü „Entwickler": Safari → Einstellungen → Erweitert → Haken bei „Menü ‚Entwickler' in der Menüleiste anzeigen" setzen. Jetzt Rechtsklick auf Text → „Element untersuchen". Wählen Sie in der Seitenleiste „Stile, Berechnet" und finden Sie den Abschnitt font-family.

Vorteile:

• Nichts zu installieren, in jedem Browser integriert
• Firefox zeigt Glyphenvorschau auf dem Tab „Schriften"
• Funktioniert für jedes Element, nicht nur Text

Nachteile:

• Langsamer als Erweiterungen: 10-30 Sekunden gegenüber sofortigem Ergebnis
• Unbequem für die massenhafte Betrachtung von Schriften auf einer Seite

5. What Can My Font Do?, umbenannte Schriften entschlüsseln

Ein ernsthaftes Hindernis für alle Erweiterungen und den Inspektor ist eine umbenannte Schriftart. Wenn ein Entwickler ein benutzerdefiniertes Paket zusammenstellt, verliert der font-family-Name die Verbindung zum Original: Statt Inter oder Roboto sehen Sie etwas wie custom-font-3742. Erweiterungen sind machtlos, sie lesen die CSS-Eigenschaft, nicht die Datei selbst.

Die Lösung ist der Dienst What Can My Font Do?. Der Algorithmus:

• Gehen Sie über den Chrome-Inspektor zum Tab Anwendung → Frames → Schriften. Finden Sie die Schriftdatei, indem Sie den Dateinamen mit dem abgleichen, was Sie in font-family sehen.
• Öffnen Sie die Schriftdatei in einem neuen Tab, sie wird heruntergeladen.
• Ziehen Sie die heruntergeladene Datei in das What Can My Font Do?-Fenster. Der Dienst analysiert die Binärdaten und zeigt: den echten Schriftnamen, die Schriftgießerei, die Anzahl der Glyphen, die Sprachunterstützung, die Lizenz und alle Zeichen in Tabellenform.

Dies ist keine sofortige Methode, sie erfordert ein bis zwei Minuten und ein grundlegendes Verständnis der DevTools. Aber wenn Erweiterungen bei einer umbenannten oder benutzerdefiniert zusammengestellten Schriftart versagen, ist What Can My Font Do? die einzige funktionierende Methode.

Vorteile:

• Identifiziert umbenannte Schriften durch binäre Dateianalyse
• Zeigt vollständige Informationen: Glyphen, Sprachen, Lizenz
• Kostenloser Webdienst, keine Installation erforderlich

Nachteile:

• Langsam: ein bis zwei Minuten pro Schriftart
• Erfordert Verständnis des Anwendung-Tabs in den DevTools

Video: Wie man eine Schriftart in einer Minute identifiziert

Sehen Sie sich eine Schritt-für-Schritt-Anleitung aller fünf Methoden in Aktion an, von Erweiterungen bis zum Inspektor:

⁉️🤔 Häufig gestellte Fragen

Sind Schrifterweiterungen sicher? Sammeln sie Daten?

WhatFont, Fontanello und Fonts Ninja sammeln keine personenbezogenen Daten und übermitteln keine Informationen über besuchte Seiten. Im Chrome Web Store-Eintrag für WhatFont gibt der Entwickler ausdrücklich an: Die Erweiterung sammelt oder verwendet keine Nutzerdaten. Fonts Ninja fordert mehr Berechtigungen an, aber dies ist notwendig, damit die Lesezeichenfunktion für Schriften funktioniert.

Kann man eine kommerzielle Schriftart und ihren Lizenzpreis herausfinden?

Fonts Ninja ist die einzige Erweiterung aus der Liste, die den Lizenzpreis direkt beim Überfahren mit der Maus anzeigt. Für kommerzielle Projekte spart das Stunden: Sie müssen die Schriftart nicht separat auf MyFonts oder Adobe Fonts suchen, um die Kosten zu ermitteln.

Was tun, wenn die Schriftart identifiziert ist, aber nicht heruntergeladen werden kann?

Schriften auf Websites sind fast immer urheberrechtlich geschützt. Den Namen herauszufinden, ist legal. Ohne Lizenz herunterzuladen und zu nutzen, ist es nicht. Wenn die Schriftart kommerziell ist (zum Beispiel aus dem Katalog von Linotype oder Monotype), kaufen Sie eine Lizenz auf der Website der Schriftgießerei. Kostenlose Schriften werden meistens auf Google Fonts gehostet, sie können in jedem Projekt frei verwendet werden.

Warum zeigt Firefox die Schriftart an, Chrome aber nicht?

Das passiert, wenn eine Schriftart über @font-face mit unterschiedlichen Formaten eingebunden ist: WOFF2 für Chrome, WOFF für ältere Firefox-Versionen. Wenn die Schriftart in Chrome nicht angezeigt wird, überprüfen Sie die DevTools-Konsole auf dem Tab „Konsole": Möglicherweise wird die Schriftdatei durch die CORS-Richtlinie blockiert oder wurde wegen eines Werbeblockers nicht geladen.

Welche Methode sollte ein Frontend-Entwickler wählen und welche ein Designer?

Für einen Frontend-Entwickler ist der integrierte Inspektor bequemer, er ist im Arbeitsablauf bereits geöffnet, kein Wechsel nötig. Für einen Designer: Fonts Ninja, es zeigt Preis, Alternativen und erlaubt, Fundstücke für zukünftige Projekte zu speichern. Für einmalige Überprüfungen „Welche Schriftart ist das?" nehmen Sie Fontanello, ein Klick und die Antwort liegt direkt vor Ihnen.

Welches Werkzeug zur Schriftidentifikation soll man wählen?

Die beste Wahl hängt von der Aufgabe ab. Wenn Sie Frontend-Entwickler sind und der Inspektor bereits geöffnet ist, bleiben Sie dabei, der Tab „Schriften" in Firefox liefert mehr Informationen als jede Erweiterung. Wenn Sie Designer sind und nach Referenzen suchen, installieren Sie Fonts Ninja wegen der Lesezeichen, Preise und ähnlichen Schriften. Für schnelle Überprüfungen ist Fontanello der Geschwindigkeitskönig: Rechtsklick und erledigt.

Und wenn keine Erweiterung damit umgehen kann, umbenannte Schriftart, benutzerdefinierter Build, selbstgemachtes Paket, laden Sie die Datei in den What Can My Font Do? Schriftanalyse-Dienst hoch. Dies ist die letzte Instanz, die immer funktioniert.