So finden Sie die Schriftart einer Webseite mithilfe des Inspect Element-Tools und der Browsererweiterungen

Der Erfolg Ihrer Website hängt stark von ihrem Aussehen ab. Mit der richtigen Farbkombination und dem richtigen Thema bleiben Ihre Besucher etwas länger auf Ihrer Website. Neben der Farbpalette und Struktur Ihrer Website spielt auch die von Ihnen gewählte Schriftart eine wesentliche Rolle, um Ihr Publikum zu binden.

Vielleicht stoßen Sie beim Surfen im Internet auf eine ansprechende Website und möchten wissen, welche Schriftarten sie verwendet. Mit Online-Erweiterungen und dem in Ihrem Browser integrierten Inspect Element-Tool ist das Identifizieren einer Schriftart schnell und einfach.

So finden Sie Schriftarten mit dem Inspect Element Tool

Falls Sie es nicht wussten, können Sie mit dem in Ihrem Browser integrierten Inspect Element Tool den Quellcode einer Website untersuchen. Sie können die Designelemente einer Site anhand von CSS, HTML und anderen Informationen verstehen. Dies ist eine großartige Möglichkeit, sich beim Entwerfen Ihrer eigenen Website inspirieren zu lassen.

Das Identifizieren einer Schriftart mit dem Inspect Element-Tool ist recht einfach und Sie benötigen keine Programmierkenntnisse. Dieses Tool ist in allen Browsern auf dem Markt verfügbar und hat jeweils ein ähnliches Layout.

So identifizieren Sie eine Schriftart mit dem Inspect-Tool Ihres Browsers.

1. Öffnen Sie die Website, die Sie verwenden möchten.
2. Markieren Sie den Text mit der Schriftart, die Sie identifizieren möchten, und klicken Sie mit der rechten Maustaste darauf.
3. Klicken Sie im Kontextmenü auf Prüfen.
   

   

4. Wenn das Menü Inspizieren geöffnet wird, klicken Sie auf Berechnet.
5. Scrollen Sie nach unten, um den Abschnitt Schriftfamilie zu finden. Hier finden Sie den Namen und den Stil der Schriftart sowie deren Abmessungen.
   

   

Andere Möglichkeiten zur Verwendung des Inspect-Tools

Wenn Sie die Schriftart einer Site mithilfe des Inspect-Tools schneller finden möchten, versuchen Sie stattdessen Folgendes:

1. Öffnen Sie die Website, die Sie verwenden möchten.
2. Drücken Sie Strg + Umschalt + C (Cmd + Umschalt + C auf Mac).
3. Bewegen Sie den Mauszeiger über den Text, um den Schriftstil, die Größe, den Farbcode und den Rand anzuzeigen.
   

   

Sie können die Liste der auf einer Webseite verwendeten Schriftarten auch mit dem Inspect-Tool überprüfen. Hier ist, wie dies zu tun:

1. Gehen Sie zur Webseite.
2. Öffnen Sie den Quellcode durch Drücken von Strg + Umschalt + I (Cmd + Umschalt + I auf Mac).
3. Klicken Sie auf die Registerkarte Netzwerk, und wählen Sie dann die Registerkarte Schriftart.
4. Hier sehen Sie eine Liste aller auf der Webseite verwendeten Schriftarten.
   

   

Um die Liste aller Schriftarten in Echtzeit abzurufen, müssen Sie möglicherweise die Webseite aktualisieren.

So identifizieren Sie Schriftarten mithilfe von Browsererweiterungen

Wenn Sie eine Schriftart bequemer identifizieren möchten, sollten Sie eine Browsererweiterung zum Auffinden von Schriftarten installieren. Es gibt zwar mehrere Browsererweiterungen, mit denen Schriftarten im Web erkannt werden können, die beiden beliebtesten sind WhatFont und Font Finder.

Schauen wir uns den Prozess der Identifizierung von Schriftarten mit beiden Erweiterungen an.

WhatFont

WhatFont ist sehr beliebt, um mehrere Schriftarten gleichzeitig schnell zu erkennen. So verwenden Sie dieses Tool.

1. Wenn WhatFont in Ihrem Browser aktiviert ist, bewegen Sie den Mauszeiger über den Text, um die Schriftart anzuzeigen.
   

   

2. Sobald Sie auf den Text klicken, wird ein Popup-Fenster mit den restlichen Schriftdetails angezeigt, z. B. Schriftgröße, Farbe und Stil.
   

   

3. Darüber hinaus können Sie mehrere Textabschnitte gleichzeitig auswählen, um verschiedene Schriftarten auf derselben Seite zu vergleichen.
   

   

Herunterladen: WhatFont für Chrome / Firefox / Safari (kostenlos)

Font Finder

Font Finder zeigt auch Schriftdetails an, wenn Sie mit der Maus über einen beliebigen Text auf einer Website fahren. Es enthält jedoch viele technische Details, sodass es etwas verwirrend werden kann, wenn Sie mit Webdesign nicht vertraut sind.

Font Finder eignet sich jedoch eher für Webentwickler, die vorhandene Schriftarten in Echtzeit durch neue ersetzen möchten. Dies macht es einfach, Schriftarten zu testen, bevor dauerhafte Änderungen vorgenommen werden.

So testen Sie eine Schriftart mit dem Font Finder:

1. Markieren Sie einen Teil des Textes von der Webseite.
2. Klicken Sie mit der rechten Maustaste darauf und wählen Sie Font Finder aus dem Kontextmenü.
   

   

3. Wählen Sie Schriftart ersetzen durch und geben Sie den Schriftnamen ein. Lassen Sie uns Calibri hinzufügen und sehen, wie es die Schriftart in der Vorschau ändert.
   

   

4. Wenn Sie die Schriftart zurücksetzen möchten, aktualisieren Sie die Seite.
   

   

Herunterladen: FontFinder für Chrome / Edge / Firefox (kostenlos)

Was ist mit der Überprüfung der Schriftart in einem Bild?

Wenn Sie die Schriftarten in einem Bild identifizieren möchten, sind Browsererweiterungen und das Inspect-Tool Ihres Browsers möglicherweise nicht hilfreich. Sie können jedoch Online-Bildinspektor-Tools wie WhatFontIs, FontSquirrel, Fontspring, WhatTheFont und viele andere ausprobieren.

Der Prozess zum Identifizieren einer Schriftart aus einem Bild ist in allen Werkzeugen weitgehend gleich. Versuchen wir, die Schriftart in einem Bild mit WhatTheFont zu identifizieren.

1. Wenn Sie dies noch nicht getan haben, laden Sie das Bild herunter, das Sie verwenden möchten.
2. Importieren Sie das Bild in WhatTheFont.
   

   

3. WhatTheFont erkennt automatisch den Text in Ihrem Bild. Verkleinern oder vergrößern Sie das Zuschneidefeld so, dass es die Schriftart umgibt, die Sie identifizieren möchten. Drücken Sie die Pfeiltaste, wenn Sie fertig sind.
   

   

4. WhatTheFont passt dann die Schriftart im Bild mit den Schriftarten in der Galerie an und zeigt Ihnen eng verwandte Schriftarten.
   

   

5. Wenn Sie nicht sofort eine gute Übereinstimmung finden, können Sie auf Weitere Ergebnisse anzeigen klicken, um weitere verwandte Schriftarten anzuzeigen.
   

   

Erkennen Sie Schriftarten aus dem Web und verwenden Sie sie in Ihren Designs

Schriftarten spielen eine wichtige Rolle für den Erfolg einer Website oder eines Grafikdesigns. Wenn Sie beim Surfen im Internet auf eine ansprechende Schriftart stoßen, können Sie sie mit den oben genannten Methoden leicht erkennen.