Schriftarten auf Websites erkennen: Die besten Tools 2026

von | 13.11.2016 | Tipps

Gute Webseiten bestechen natürlich zuerst durch ihren Inhalt. Daneben spielt aber auch das Design eine wichtige Rolle: Farben, Layout und natürlich auch die eingesetzten Schriften. Welche Schriften auf einer Website zum Einsatz kommen, lässt sich 2026 einfacher denn je herausfinden.

Browser-Entwicklertools: Der schnellste Weg

Moderne Browser haben längst eigene Tools integriert, mit denen ihr Schriftarten blitzschnell identifizieren könnt. In Chrome, Firefox, Safari und Edge funktioniert das so:

  1. Rechtsklick auf den Text, dessen Schrift ihr bestimmen wollt
  2. „Element untersuchen“ oder „Entwicklertools“ auswählen
  3. Im Entwicklerfenster auf den Tab „Computed“ oder „Berechnet“ wechseln
  4. Nach „font-family“ suchen – dort steht die verwendete Schrift

Alternativ könnt ihr auch F12 drücken, das Element-Auswahl-Tool aktivieren (meist ein Cursor-Symbol) und dann auf den gewünschten Text klicken. Die Schriftinformationen werden dann im CSS-Panel angezeigt.

Das klassische Fount-Bookmarklet

Für alle, die eine noch einfachere Lösung bevorzugen, gibt es das bewährte Fount-Tool. Das baut man als Lesezeichen in die Browser-Leiste ein:

  1. Zuerst auf die Webseite https://fount.artequalswork.com surfen.
  2. Hier findet sich ein großer Button, der mit FOUNT beschriftet ist. Diesen Button jetzt in die Favoriten-Leiste ziehen.
  3. Nun eine Webseite besuchen, auf der eine Schrift ermittelt werden soll.
  4. Dann auf den FOUNT-Button klicken. Daraufhin verwandelt sich die Maus in ein Auswahl-Werkzeug.
  5. Jetzt auf den Text klicken, dessen Schrift bestimmt werden soll.
  6. Die Schrift und Größe werden dann oben rechts auf der Seite eingeblendet.

fount

Browser-Extensions für Profis

Wer regelmäßig Schriften analysieren muss – etwa Webdesigner oder Frontend-Entwickler – sollte sich spezialisierte Browser-Extensions anschauen:

WhatFont ist eine der beliebtesten Chrome-Extensions. Nach der Installation klickt ihr einfach auf das WhatFont-Symbol in der Toolbar und dann auf beliebige Textelemente. Ihr seht sofort Schriftart, Größe, Zeilenhöhe und Farbe.

FontFinder für Firefox bietet ähnliche Funktionen und zeigt zusätzlich an, ob es sich um Web-Fonts oder System-Schriften handelt.

Type Sample geht noch einen Schritt weiter: Die Extension erstellt automatisch ein Sample-Sheet aller auf einer Seite verwendeten Schriften.

KI-gestützte Schrifterkennung

Eine spannende Entwicklung sind KI-Tools, die Schriften auch in Bildern erkennen können. WhatTheFont von MyFonts hat sein klassisches Tool 2025 komplett überarbeitet. Ihr könnt jetzt Screenshots hochladen oder sogar direkt mit der Smartphone-Kamera Schriften scannen. Die KI erkennt selbst verzerrte oder perspektivisch dargestellte Texte.

Adobe Fonts bietet seit 2025 eine ähnliche Funktion direkt in Creative Cloud integriert. Besonders praktisch: Erkannte Schriften könnt ihr direkt in euren Adobe-Projekten verwenden, falls ihr ein Abo habt.

Variable Fonts verstehen

Variable Fonts werden immer wichtiger im Web. Diese modernen Schriftarten können ihre Eigenschaften (Gewicht, Breite, Neigung) stufenlos verändern. Die Browser-Entwicklertools zeigen euch seit 2024 auch diese Parameter an. In Chrome findet ihr unter „Computed“ > „font-variation-settings“ die genauen Werte.

Was die Schriftanalyse verrät

Die Schriftart einer Website verrät viel über deren Zielgruppe und Positionierung. Tech-Unternehmen setzen oft auf moderne Sans-Serif-Schriften wie Inter oder Roboto. Luxusmarken bevorzugen klassische Serifen-Fonts. Start-ups experimentieren gerne mit Custom-Fonts.

Besonders interessant: Viele große Unternehmen entwickeln mittlerweile eigene Corporate Fonts. Netflix Typeface, Spotify Circular oder die Apple-Schriften San Francisco sind Beispiele für solche maßgeschneiderten Schriftarten.

Performance im Blick behalten

Bei der Schriftanalyse solltet ihr auch die Ladezeiten im Auge behalten. Die Entwicklertools zeigen unter „Network“ an, wie lange Web-Fonts zum Laden brauchen. Langsame Schriften können die User Experience verschlechtern.

Moderne Websites nutzen deshalb Font-Display-Strategien: „font-display: swap“ sorgt dafür, dass erst eine System-Schrift angezeigt wird, bis der Web-Font geladen ist.

Rechtliche Aspekte

Nicht alle Schriften dürft ihr einfach so verwenden, nur weil ihr sie identifiziert habt. Kommerzielle Fonts benötigen meist eine Lizenz. Google Fonts und Adobe Fonts bieten legale Alternativen für Webprojekte. Variable Fonts von Foundries wie Hoefler & Co oder Klim Type Foundry sind oft kostenpflichtig, bieten aber einzigartige Gestaltungsmöglichkeiten.

Die Schriftanalyse ist heute einfacher und präziser denn je. Egal ob ihr als Designer nach Inspiration sucht oder einfach nur neugierig seid – mit den richtigen Tools findet ihr jede Schrift im Web.

Zuletzt aktualisiert am 05.04.2026