Schriftart einer Website herausfinden – drei Wege, die immer funktionieren
Mit den Entwicklertools von Chrome, Firefox und Safari, per Erweiterung oder Screenshot: So findest du heraus, welche Schrift eine Website nutzt.
Bei Websites hast du einen großen Vorteil gegenüber Plakaten oder Fotos: Der Name der Schrift steht im Quelltext. Du musst nur wissen, wo du nachsehen musst. Hier sind drei Wege – vom schnellsten bis zum zuverlässigsten.
Weg 1: Die Entwicklertools deines Browsers
Jeder Desktop-Browser hat eingebaute Entwicklertools. Du brauchst keine Programmierkenntnisse, nur ein paar Klicks.
Google Chrome und Microsoft Edge
- Klick mit der rechten Maustaste auf den Text, dessen Schrift du suchst.
- Wähl Untersuchen. Am Rand öffnet sich ein Fenster mit dem markierten Element.
- Wechsle im unteren Bereich auf den Reiter Berechnet (englisch Computed).
- Ganz unten steht der Abschnitt Gerenderte Schriftarten (Rendered Fonts). Dort siehst du den Namen der Schrift, die der Browser tatsächlich verwendet.
Wichtig ist dieser letzte Abschnitt. Weiter oben findest du zwar auch die
Eigenschaft font-family, aber die enthält oft eine ganze Liste wie
"Brand Sans", Helvetica, Arial, sans-serif. Welche davon wirklich
angezeigt wird, verrät erst die gerenderte Schrift.
Mozilla Firefox
- Rechtsklick auf den Text und Untersuchen wählen.
- Im rechten Bereich den Reiter Schriftarten öffnen.
- Firefox zeigt die verwendete Schrift samt Vorschau, Schnitt und bei variablen Schriften sogar die eingestellten Achsen.
Safari
Safari blendet die Entwicklertools standardmäßig aus. Aktiviere sie unter Einstellungen › Erweitert › Funktionen für Webentwickler anzeigen. Danach funktioniert der Rechtsklick auf Element-Informationen wie bei Chrome.
Weg 2: Eine Browser-Erweiterung
Wenn du häufig Schriften auf Websites bestimmst, sparen Erweiterungen wie WhatFont Zeit: Erweiterung anklicken, mit der Maus über den Text fahren, fertig. Bedenke aber, dass Erweiterungen Zugriff auf die besuchten Seiten bekommen. Installiere nur solche, denen du vertraust, und entferne sie wieder, wenn du sie nicht mehr brauchst.
Weg 3: Screenshot und Schrifterkennung
Manchmal helfen die Entwicklertools nicht weiter:
- Der Text ist Teil eines Bildes, etwa in einem Banner oder einer Grafik.
- Die Website nutzt einen verschleierten Namen wie
font-1a2b3c, wie es manche Baukästen und Schriftdienste tun. - Du bist am Smartphone und hast keine Entwicklertools zur Hand.
Dann machst du einen Screenshot und lädst ihn bei Schriftart erkennen hoch. Bildschirmtext ist gestochen scharf, deshalb sind Screenshots die beste Vorlage für eine Erkennung überhaupt. Worauf es dabei ankommt, steht unter Schriftart im Screenshot erkennen.
| Tastenkombination | System |
|---|---|
| Win + Umschalt + S | Windows (Ausschnitt) |
| Cmd + Umschalt + 4 | macOS (Ausschnitt) |
| Seitentaste + Lauter | iPhone mit Face ID |
| Ein/Aus + Leiser | die meisten Android-Geräte |
Systemschrift oder Webfont?
Viele Websites laden gar keine eigene Schrift, sondern verwenden die des
Betriebssystems: Segoe UI unter Windows, San Francisco auf Mac und
iPhone, Roboto auf vielen Android-Geräten. Das erkennst du daran, dass in
font-family Werte wie system-ui oder -apple-system stehen. In dem Fall
sieht dieselbe Website auf jedem Gerät etwas anders aus – und die „Schrift der
Website“ gibt es streng genommen nicht.
Darf ich die Schrift einfach übernehmen?
Den Namen herauszufinden ist erlaubt; die Schrift auf deiner eigenen Website zu verwenden, ist eine Frage der Lizenz. Freie Schriften von Google Fonts darfst du in der Regel ohne Weiteres einsetzen. Kommerzielle Webfonts brauchen eine eigene Lizenz – die Datei von einer fremden Website zu kopieren, ist nicht erlaubt. Mehr dazu im Ratgeber Schriftlizenzen und kommerzielle Nutzung.