Schriftarten sind längst zum wichtigen Gestaltungselement von Websites geworden. Dank Web Fonts könnt ihr heute praktisch jede Schriftart verwenden – von Google Fonts über Adobe Fonts bis zu selbst gehosteten Custom Fonts. Doch wie findet ihr heraus, welche Schrift eine bestimmte Website verwendet? Die Browser-Entwicklertools machen es möglich.
Die Zeiten, in denen Webdesigner nur auf Helvetica, Arial und Times angewiesen waren, sind längst vorbei. Heute setzen Websites auf charakteristische Typografie, um ihre Markenidentität zu stärken. Apple nutzt die hauseigene San Francisco, Google setzt auf Roboto, und selbst kleinere Unternehmen verwenden oft Custom Fonts für ein unverwechselbares Design.
Schriftarten ermitteln: So geht’s in jedem Browser
Um herauszufinden, welche Schrift eine Website verwendet, benötigt ihr keine speziellen Tools. Alle modernen Browser haben leistungsstarke Entwicklertools eingebaut, die euch detaillierte Informationen über verwendete Schriftarten liefern.
Chrome und Edge (Chromium-basiert)
- Öffnet die gewünschte Website – nehmen wir als Beispiel microsoft.com
- Klickt mit der rechten Maustaste auf den Text, dessen Schriftart ihr analysieren wollt
- Wählt „Element untersuchen“ oder „Inspect“ aus dem Kontextmenü
- Die Entwicklertools öffnen sich. Im rechten Panel findet ihr unter „Computed“ oder „Berechnet“ den Bereich „Rendered Fonts“
- Hier seht ihr alle verwendeten Schriftarten für das ausgewählte Element
Besonders praktisch: Chrome zeigt euch nicht nur den Namen der Schrift, sondern auch, ob sie lokal installiert oder als Web Font geladen wurde.
Firefox
Firefox bietet eine besonders detaillierte Schriftanalyse:
- Rechtsklick auf das gewünschte Element → „Element untersuchen“
- In den Entwicklertools wechselt ihr zum Tab „Fonts“
- Firefox zeigt euch eine Vorschau der verwendeten Schrift inklusive aller geladenen Schriftschnitte
- Zusätzlich seht ihr die Quelle der Schrift (lokal oder Web Font) und weitere technische Details
Safari
Auch Safari macht die Schriftanalyse einfach:
- Aktiviert zunächst das Entwicklermenü in den Safari-Einstellungen
- Rechtsklick → „Element untersuchen“
- Im Bereich „Computed“ findet ihr unter „font-family“ die verwendeten Schriftarten
Web Font-Dienste erkennen
Viele Websites nutzen externe Web Font-Services. Hier die wichtigsten:
Google Fonts: Kostenlos, riesige Auswahl, erkennbar an URLs wie „fonts.googleapis.com“
Adobe Fonts (ehemals Typekit): Premium-Service, erkennbar an „use.typekit.net“ oder „use.edgefonts.net“
Font Squirrel: Kostenlose Web Fonts für kommerzielle Nutzung
MyFonts: Kommerzielle Schriften mit Web Font-Option
Professionelle Tools für Typografie-Analysen
Browser-Extensions
WhatFont: Die populäre Chrome-Extension zeigt Schriftinformationen beim Hovern über Text an. Besonders praktisch für schnelle Analysen.
Fontface Ninja: Ähnlich wie WhatFont, bietet aber zusätzlich Download-Links zu kostenlosen Schriften.
Desktop-Tools
Adobe Creative Suite: Photoshop und Illustrator können Schriftarten in Bildern automatisch erkennen und passende Alternativen vorschlagen.
Font Finder: Spezialisierte Software zur Schrifterkennung, auch aus Screenshots.
Technische Hintergründe verstehen
Web Fonts funktionieren über CSS @font-face-Regeln oder Einbindung externer Stylesheets. Moderne Websites definieren meist Font-Stacks – eine Hierarchie von Schriftarten. Falls die gewünschte Web Font nicht lädt, greift der Browser auf die nächste Schrift in der Liste zurück.
Typisches Beispiel:
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
Hier würde zuerst Segoe UI versucht, dann Helvetica Neue, dann Arial und schließlich die Standard-Sans-Serif-Schrift des Systems.
Rechtliche Aspekte beachten
Nur weil ihr eine Schriftart identifiziert habt, dürft ihr sie nicht automatisch verwenden. Kommerzielle Schriften erfordern Lizenzen. Achtet auf:
- Kostenlose Schriften: Google Fonts, Font Squirrel bieten lizenzfreie Optionen
- Kommerzielle Lizenzen: Bei MyFonts, Adobe Fonts meist kostenpflichtig
- System-Schriften: Windows-, macOS- und Linux-Schriften haben unterschiedliche Nutzungsbedingungen
Performance im Blick behalten
Web Fonts beeinflussen die Ladegeschwindigkeit eurer Website. Die Entwicklertools zeigen auch Performance-Daten:
- Network-Tab: Hier seht ihr, wie lange das Laden der Schriftdateien dauert
- Lighthouse: Googles Tool bewertet die Font-Performance und gibt Optimierungsvorschläge
Moderne Techniken wie „font-display: swap“ sorgen dafür, dass Text sofort mit Fallback-Schriften angezeigt wird, während die Web Fonts im Hintergrund laden.
Trends 2026: Variable Fonts und KI
Variable Fonts setzen sich immer mehr durch. Diese Technologie ermöglicht unendliche Variationen einer Schrift in einer einzigen Datei – von ultra-leicht bis fett, von schmal bis breit. Die Entwicklertools moderner Browser unterstützen bereits die Analyse variabler Schriften.
KI-Tools wie Adobe Sensei können mittlerweile sogar aus Screenshots oder Fotos Schriftarten identifizieren und passende Alternativen vorschlagen – besonders nützlich für Designer, die Schriften aus Print-Medien oder älteren Websites nachbauen möchten.
Mit diesen Methoden und Tools seid ihr bestens gerüstet, um die Geheimnisse der Typografie im Web zu entschlüsseln und für eure eigenen Projekte zu nutzen.
Zuletzt aktualisiert am 19.04.2026
