Anleitung, Website Planung

Einfach die Schriftart einer Website herausfinden: Chrome, Safari, Firefox

Du bist gerade dabei deine Website zu planen und auf der Suche nach der passenden Schriftart?
Wenn du auf anderen Seiten nach Inspirationen suchst fragst du dich vielleicht: „Welche Schriftart ist das?“. Ob für dein eigenes Webdesign, Branding oder einfach aus Neugier – die Schriftart einer Website herauszufinden, ist einfacher als gedacht. In diesem Beitrag zeige ich dir, wie du die Website-Schriftart herausfinden kannst – direkt im Browser, ganz ohne Vorkenntnisse.

Du erfährst, wie du mit Tools wie dem Chrome-Inspektor, Browser-Erweiterungen wie WhatTheFont die verwendete Schriftart identifizierst. Egal ob du Google Chrome, Safari oder Firefox nutzt – ich erkläre dir Schritt für Schritt, wie du die Schriftart einer Website herausfinden kannst.

Bereit für eine Website, die dich in deinem Business unterstützt?

Hol dir jetzt meine kostenlose Website Starter Checkliste und finde heraus was deiner Website fehlt!

Mehr Klarheit, bessere Website, entspannter durchstarten!
Hol dir die Checkliste, die dich sicher ans Ziel bringt – kostenlos.

1. So erkennst du die gesuchte Schriftart im Chrome Browser

Variante 1: Mit einer Erweiterung

So fügst du die Erweiterung in deinem Chrome Browser hinzu:

Klicke auf die drei Punkte rechts oben im Browser
Gehe zum Menüpunkt „Erweiterungen“
Wähle dort „Chrome Webstore besuchen“ aus
Du kannst alternativ auch diesen Link verwenden, da kommst du direkt in den Chrome Webstore: https://chromewebstore.google.com/
Suche nach „Font“

Dir werden mehrere Erweiterungen für Schriftarten erkennen angezeigt
Ich zeige dir am Beispiel von „What Font“ , du kannnst aber gerne auch eine andere Erweiterung auswählen, letztendlich funktionieren alle ähnlich
Klicke auf „What font“ und wähle dann „Hinzufügen“, damit ist die Erweiterung schon im Browser aktiviert

Um Schriftarten zu erkennen gehst du einfach auf die Website, auf der du die Schriftartuntersuchen willst und klickst oben im Browser auf die „What Font“ Erweiterung
Es aktiviert sich rechts oben ein Text „Exit What Font“: Daran erkennst du, dass die Erweiterung jetzt aktiv ist
Fahre mit der Maus über die Schriftarten, die du herausfinden willst

Aktiver Status der Erweiterung:

Klicke mit der linken Maus Taste und die Informationen zur Schriftart werden dir angezeigt

TADAAA – Das wars auch schon. Wenn du fertig bist einfach rechts oben auf den Exit Text klicken und du bist wieder im „Normalen“ Surfmodus.

Das waren zwar viele kleine Schritte aber im Grunde dauert das Ganze keine 5 Minuten und mit meiner Anleitung sollte das kein Problem sein.

Variante 2: Mit dem Browser Inspect bzw. Untersuchen Modus

Mit dieser Variante bist du normalerweise schneller als mit der Variante mit der Erweiterung. Wenn du aber mit Code gar nichts anfangen möchtest, dann ist Variante 1 für dich die bessere…obwohl der Browser Inspect auch nicht sooo schwierig ist.

So findest du die Schriftart heraus:

Gehe auf die gewünschte Website, wo du die Schriftart herausfinden finden möchtest und mache einen Rechtsklick mit der Maus und klicke ganz unten auf „Untersuchen“ oder „Inspect“ (falls dein Browser auf Englisch ist), alternativ geht auch auf Mac fn+f12, es öffnet sich dann die Entwicklerconsole
Dort klickst du einmal auf das Zeichen links oben in dem Menü (rotes Kästchen im Screenshot)
Wenn du dann mit der Maus über die Website fährst, markieren sich alle Elemente – darunter auch deine Schriftarten
Du kannst dabei die Informationen über die Schriftart sehen: Name, Farbe, Accessibility Contrast
Wenn du fertig bist, einfach wieder die Browser Console rechts oben schliessen – Das wars!

2. Schriftart herausfinden einer Website im Safari Browser

Ich zeige dir hier nur eine Variante, da es im Safari Browser relativ einfach ist, in der Browser Konsole die Schriftart zu erkennen.

Aktiviere zunächst das Entwicklermenü: Gehe zu „Safari“ > „Einstellungen“ > „Erweitert“ und aktiviere „Menü ‚Entwickler‘ in der Menüleiste anzeigen“.

Klicke mit der rechten Maustaste auf den gewünschten Text und wähle „Element Informationen“ oder über die Tastenkombination Cmd + Option + I
Die Entwickler Konsole öffnet sich ( vielleicht öffnet sie sich bei dir anstatt rechts auch unten)
Klicke als nächstes ganz oben in der Menüleiste auf das Symbol , das aussieht wie ein Ziel

Fahre jetzt mit der Maus über die gewünschte Schriftart.
Klicke darauf und dir werden in dem Menü rechts unten, im Tab „Schrift“ die Schriftarten Informationen angezeigt
Schliessen kannnst du die Konsole wie gewohnt oder mit der gleichen Tastenkombination Cmd + Option + I

3. Schriftart herausfinden im Firefox Browser

Im Firefox Browser funktioniert das Untersuchen in der Browser Konsole ähnlich wie bei Google Chrome und Safari.

Du machst einen Rechtsklick mit der Maus auf der Seite auf der gewünschten Website, alternativ auch mit der
Tastenkombination Mac: Cmd + Option + I oder Windows: Ctrl + Shift + I
dann klickst du in der geöffneten Konsole wieder links oben auf das Icon mit dem Pfeil, damit aktiviert sich der Inspekt Modus
Fahre mit der Maus über den Text den du untersuchen willst und mache einen Linksklick
In der Browser Konsole siehst du rechts unten im Tab „Schriften“ die gesuchten Informationen

So kannst du übrigens die Anordnung der Browser Konsole steuern:

Der Schriften Tab: Hier siehst du deine gesuchte Schriftart! Fertig!
Wenn du fertig bist einfach Konsole schliessen – entweder über die gleiche Tastenkombination wie zum öffnen oder über das X.