Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agentur finden
    • 3D Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt

Dr. Web » Webdesign » Schriftarten auf einer Website erkennen

Schriftarten auf einer Website erkennen

  • Aktualisiert am 2. April 2023
  • Dieter Petereit von Dieter Petereit
  • Webdesign
  • 11 Kommentare

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.

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.

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


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.

Inhaltsverzeichnis

Agenturpartner in München

Edit Content

Timo Specht

Drei Dinge, die dich bislang vom SEO Erfolg abhalten, sind entweder:

  1. lückenhafte Umsetzung der Basics
  2. sprunghafter Aktionismus ohne Durchhaltevermögen
  3. oder zahlreiche Optimierungsversuche ohne klare Zielsetzung.

Es ist 2023 und SEO funktioniert besser denn je — dazu stehe ich aus eigener Erfahrung und an eigenem Exempel.

Meine Anfragen generiere ich verlässlich, qualitativ und hoch frequentiert durch 100% organische Reichweite. Wir, mein Team & ich, haben unsere Strategie die letzten 5 Jahre präzise verfeinert und erfolgreich umgesetzt. Diese Präzision sorgt bei hunderten Kundenprojekten für gewünschte Resultate, vor allem dann wenn die Zielsetzung klar ist.

Unser Vertrauen ziehen wir aus messbaren Tatsachen & wiederkehrenden Ergebnissen — nicht aus Behauptungen von Google darüber, wie es scheinbar zu funktionieren hat.

Wenn du dir deiner Zielsetzung jetzt bewusst bist, dann kontaktiere mich zum unverbindlichen Erstgespräch. Gemeinsam finden wir heraus ob wir dir mit SEO helfen können.

Ich freue mich dich kennenzulernen.

— Timo Specht,
Geschäftsführer der Specht GmbH
Alle Webdesign-Agenturen →

Lust auf mehr?

14 Best Practices, die Sie für einen erfolgreichen Internetseite Relaunch beachten sollten

Was bewegt einen Unternehmer dazu, seine Internetseite von Grund auf neu auszurichten? Nun, die Gründe für einen Internetseite Relaunch einer können sehr vielfältig sein. Oft spielt ein veraltetes Design eine Rolle. Dieser Grund ist nicht so trivial, wie er vielleicht erscheint. Denn ein unmodernes Aussehen der Webseite kann Besucher und damit potenzielle neue Kunden abstoßen.

KI GPT-4: werden Webdesigner und sonstige Erdlinge ihren HAL-Moment erleben?

Wo ist dieser verdammte Aus-Schalter?” Dies waren die letzten Worte von David Bowman, dem Anführer einer Widerstandsgruppe Webdesigner, denen es gelang zum vermeintlichen WDN-Zentralcomputer vorzudringen, bevor sie von Wächterdroiden eliminiert wurden.

Microsoft Designer to the people: KI Power Webdesign und Grafikdesign?

Ein Webdesign selbst erstellen? Ist bei mir schon ewig her. 2006 muss das gewesen sein. Ich durfte für eine Rechtsanwaltskanzlei ran. Typische Erstaufträge. Freundes- und Bekanntenkreis abgrasen eben. Der damalige Freund einer Freundin arbeitete dort und brachte mich ins Spiel.

11 Antworten

  1. 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.

  2. Andreas sagt:
    7. Januar 2020 um 17:35 Uhr

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

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

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

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

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

    Antworten
  5. 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
  6. 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
  7. 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
  8. Tim sagt:
    2. August 2020 um 21:18 Uhr

    Wow, danke für die wervollen Tipps!

    Antworten
  9. 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
  10. Selina sagt:
    29. September 2020 um 21:52 Uhr

    Sehr hilfreicher Artikel. Vielen Dank!

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

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

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Alle Städte und Leistungen
  • Alle Städte
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich
  • Alle Städte und Leistungen
  • Alle Städte
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich

Agentur nach Schwerpunkt finden

  • Beste Agenturen
  • Designagentur
  • Digitalagentur
  • Drupal Agentur
  • Online Marketing Agentur
  • SEO Agentur
  • Internetagentur
  • Marketing Agentur
  • Shopify Agentur
  • Shopware Agentur
  • Social Media Agentur
  • TYPO3 Agentur
  • Webagentur
  • Webdesign Agentur
  • Werbeagentur
  • WordPress Agentur
  • Beste Agenturen
  • Designagentur
  • Digitalagentur
  • Drupal Agentur
  • Online Marketing Agentur
  • SEO Agentur
  • Internetagentur
  • Marketing Agentur
  • Shopify Agentur
  • Shopware Agentur
  • Social Media Agentur
  • TYPO3 Agentur
  • Webagentur
  • Webdesign Agentur
  • Werbeagentur
  • WordPress Agentur

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen