Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Beste Agenturen
  • Magazin
Dr. Web Logo seit 1997.
  • Kontakt
  • Anmeldung
  • Newsletter
  • Beste Agenturen
  • Magazin
Menü
  • Beste Agenturen
  • Magazin
Suche
Agenturpartner werden →
Dr. Web » Webdesign » Schriftarten auf einer Website erkennen

Schriftarten auf einer Website erkennen

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 11 Kommentare
Lesedauer: 3 Minuten
  • von Dieter Petereit
  • 7. Juli 2020

Zumeist wird sie vom Kunden gestellt. “Schauen Sie sich mal unseren Flyer aus dem letzten Jahr an. Diese Schriftart wollen wir auch im nächsten Projekt verwenden.” Der Kunde weiß natürlich nicht, welche es ist. Die folgenden Dienste wissen unterschiedlich gut zu helfen, sind aber jedenfalls die beste Toolbox, die es derzeit gibt…

Font Match

font match Schriftarten auf einer Website erkennen
Schriftarten auf einer Website erkennen 1

Font Match ist eine kleine App, mit der Sie zwei Schriftarten diekt nebeneinander vergleichen können. Das Ziel hier ist vor allem, sogenannte Fallback-Schriftarten zu finden, um mit Hilfe von System-Schriftarten die Ladezeit einer Webseite zu verbessern, während die eigentlich gewünschte Schriftart noch im Hintergrund lädt.

Font in Logo

Sie haben ein tolles Logo gesehen und sich gefragt, welche Schriftart das ist? Wenn es nun nicht gerade Futura ist, kann Font In Logo genau das rausfinden.

Marke - Logo
Schriftarten auf einer Website erkennen 2

WhatTheFont ist der Marktführer bei den Font-Identifizierern

whatthefont Schriftarten auf einer Website erkennen
WhatTheFont in Aktion. (Screenshot: D. Petereit)


WhatTheFont von MyFonts hat schon dadurch einen Vorteil, dass es auf eine der größten Schriftenkollektionen des Netzes zugreifen kann. Zudem ist es schon ewig am Markt. Dennoch verlässt sich WhatTheFont auch stets auf Bilder als Input und bietet keine direkte Identifikation auf Live-Websites an. Was es von anderen absetzt, sind die Apps für Android und iOS. Diese erlauben dir die Identifikation von Schriften per Smartphone-Kamera.

carousel img Schriftarten auf einer Website erkennen
Smartphone-App in Aktion. (Bild: MyFonts)


WhatTheFont ist so erfolgreich, dass etliche ältere Dienste mit gleicher Zielsetzung inzwischen ihre entsprechenden Services eingestellt haben und direkt auf WhatTheFont verweisen, so etwa Linotype.

WhatFontIs identifiziert Schriftarten aus Bildern

whatfontis Schriftarten auf einer Website erkennen
WhatFontis – ähnliches Prinzip wie WhatTheFont, aber keine Apps. (Screenshot: D. Petereit)


WhatFontis ist eine nützliche Arbeitshilfe für jeden Webdesigner. Dabei ist die Verwendung so simpel wie das Bookmarken einer Seite. WhatFontis ist als Bookmarklet und als Extension für Chrome und Safari verfügbar. Einmal aktiviert, gibt es detaillierte Einblicke zu den auf einer Website verwendeten Schriftarten.

Dabei basiert die Erkennung der Schriften immer auf einer Bilddatei. Die Chrome-Extension ist im Grunde nichts weiter als der Aufruf der WhatFont-Web-App. Die anderen beiden Extensions setzen WhatFont ins Kontextmenü.

Einen Vorteil gegenüber WhatTheFont kann ich nicht erkennen. Ich würde den Dienst also nur da einsetzen, wo andere schon gescheitert sind – als last resort quasi.

Fount – Bookmarklet mit durchwachsener Erfolgsquote

fount Schriftarten auf einer Website erkennen


Der Wettbewerber Fount ist eine reine Bookmarklet-Lösung, bietet also keine Extensions oder andere Zugänge zur Funktionalität. Im Vergleich wirkt Fount optisch etwas altbacken, und kann nicht mit gleicher Zuverlässigkeit korrekte Ergebnisse vorweisen. Direkte Anbindungen an gängige Fontlibraries sucht man ebenfalls vergeblich. In meinen Tests kam Fount nicht nur vielfach an seine Grenzen, es funktionierte auch nur sehr unzuverlässig und nicht in jedem Browser.

Dennoch ist Fount eine zusätzliche Option. Das erste Werkzeug der Wahl sollte der Dienst aber nicht sein.

Font Matcherator

fontmatcherator Schriftarten auf einer Website erkennen
Font Matcherator von Fontspring. (Screenshot: D. Petereit)


Der Font Matcherator funktioniert ebenfalls auf der Basis hochzuladender Bilder. Sein Wettbewerbsvorteil besteht darin, dass das gesamte Fontspring-Portfolio hinter ihm steht. So ist er ähnlich stark wie WhatTheFont. Fontspring selber sieht den Matcherator noch weiter vorne, weil er etwa auch Open-Type-Features und einige andere Spezialitäten erkennen kann. In meinem Alltagstest spielte das indes keine entscheidene Rolle. Die Tools waren vergleichbar gut.

Außer Konkurrenz sei noch erwähnt:

identifont Schriftarten auf einer Website erkennen
Identifikation (u.a.) im Interview-Stil. (Screenshot: D. Petereit)

Identifont – Dieser Vertreter seiner Gattung versucht Schriftarten zu identifizieren, indem er dem Suchenden eine Vielzahl von Fragen stellt. Man muss also Geduld und ein Basiswissen mitbringen, um (möglicherweise) erfolgreich zu sein.

(Artikelbild: Depositphotos)

Dieter Petereit

Dieter Petereit

Dieter Petereit ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für Technik-affine Medien wie T3N und Dr. Web. Dieter war acht Jahre lang Chefredakteur des Dr. Web Magazins.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Logo von Lausitz Design.

Internetagentur lausitz.design

Schleife

Michael Freitag Immobilien-Marketing München logo

Critch GmbH – Immobilienkanzlei FREITAG®

München

Logo der Webdesign-Agentur Wolpers Web aus Düsseldorf.

wolpersweb.de Webdesign & SEO

Düsseldorf

Sparkman webdesign Frankfurt.

Webdesign Frankfurt | Sparkm4n

Dillenburg

dskom GmbH (ehem. SEO Profi Berlin)

Berlin

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
Junger Mann, der in einer SEO-Agentur arbeitet arbeitet und in die Kamera lächelt.
SEO

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Inhaber einer WordPress-Agentur, am Tisch sitzt und in die Kamera schaut.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

11 Antworten

  1. Selina sagt:
    29. September 2020 um 21:52 Uhr

    Sehr hilfreicher Artikel. Vielen Dank!

    Antworten
  2. Klara sagt:
    15. August 2020 um 18:48 Uhr

    Vielen Dank für diesen interessanten und hilfreichen Artikel! Die Schriftart eines Logos rauszufinden, hat mich schon so oft zum Verzweifeln gebracht. Jetzt bestimmt nicht mehr 🙂

    Antworten
  3. Tim sagt:
    2. August 2020 um 21:18 Uhr

    Wow, danke für die wervollen Tipps!

    Antworten
  4. Webdesign Berlin sagt:
    28. Juli 2020 um 22:01 Uhr

    Das ist ja der Hammer! Klar, wenn es sich um Webfonts handelt, genügt ein Blick in den Code. Aber gerade bei Logos, ist dies kaum möglich. In sofern ist dies einer der hilfreichsten Artikel, die ich 2020 gelesen habe.

    Antworten
  5. Siegbert Redlich sagt:
    16. Juli 2020 um 9:48 Uhr

    kleine Korrektur: mit dem Bookmarklet „Fontdropper“ kann man beides machen, Schriftarten anzeigen lassen (Häckchen setzen bei: „Show Font Info on Hover“) oder auch temporär per Drag&Drop verändern (oder per Klick – Häckchen setzen bei: „Click on Text then Font to Apply“)

    Antworten
  6. Siegbert Redlich sagt:
    16. Juli 2020 um 9:18 Uhr

    Mein Favorit unter den Bookmarklets ist seit zig-Jahren „WhatFont“, da es im Gegensatz zum hier erwähnten „Fount“ nicht nur die verwendete Schriftart und Schriftgröße darstellt, sondern auch gleich die Angabe der Alternativschriften (WhatFont stellt die Schriftarten die nicht auf dem meinem System vorhanden sind, durchgestrichen dar), sowie den HTML-Farbcode und die Zeilenhöhe des auszuspähenden Textes, exakt so wie es im CSS niedergeschrieben wurde. Ob im Gegensatz dazu „font dragr“ bei dem man wie der Name schon vermuten lässt, einen kurzen Textauszug oder ein betreffendes Wort auf das Menü des Bookmarklets per Drag&Drop zieht, noch funzzt, – habe ich länger nicht mehr getestet.

    Zu nennen wäre bei den Bookmarklets auch noch „Fontdropper“, mit dem man zwar keine Schriften ausliest, dafür aber als Websiteentwickler Textabschnitte und Überschriften einer Seite im Browser in zahlreichen auswählbaren Google-Fonts per Klick darstellen lassen bzw. testen kann.

    Antworten
  7. trgirl sagt:
    24. Januar 2020 um 14:50 Uhr

    Dann gibts auch nocht Font Squirrel
    https://www.fontsquirrel.com/matcherator

    Antworten
  8. Ralf Schlott sagt:
    15. Januar 2020 um 2:06 Uhr

    WhatTheFont ist echt ein Oldtimer, den ich auch immer wieder nehme.

    Antworten
  9. Andreas sagt:
    7. Januar 2020 um 17:35 Uhr

    Sehr interessanter Artikel. Ich kannte die Tools noch gar nicht.
    Nice!

    Antworten
  10. cosinheiro sagt:
    3. Januar 2020 um 7:56 Uhr

    Meistens reicht ein Blick in den Quelltext!

    Antworten
    1. Frank sagt:
      3. Januar 2020 um 9:11 Uhr

      Recht hast Du; dann nämlich nicht, wenn der mutmaßliche Font als Bild daherkommt. Und schon braucht es eine Bilderkennung, die zum hoffentlich ähnlichen oder passenden Font führt.

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.
Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Allgemein
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress
  • Allgemein
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑