So identifizieren Sie Schriftarten von einer Website

Haben Sie jemals die perfekte Schriftart für Ihre Website auf einer anderen Website, einem Bild oder einem Blog gefunden, wussten aber nicht, wie Sie ihren Namen finden? Sie sind an der richtigen Stelle. In diesem Leitfaden zeigen wir Ihnen, wie Sie Schriftarten auf einer Website identifizieren , um Ihnen zu helfen, die perfekte Typografie für Ihr Unternehmen zu finden.

Warum ist es nützlich zu sehen, welche Schriftarten eine Website verwendet?

Wenn Sie an der Erstellung Ihrer Website arbeiten oder Ihre Online-Inhalte entwerfen, sind Sie immer auf der Suche nach Möglichkeiten, sie zu verbessern. Sie können das auf viele Arten tun. Die offensichtlichsten sind die Verwendung eines anderen Themas, das Hinzufügen von Funktionen und das Bereitstellen besserer Inhalte. Aber es gibt andere nicht so offensichtliche Dinge, die Sie tun können, um einen Vorteil gegenüber Ihren Konkurrenten zu haben und Ihre Website einzigartig zu machen. Die Schriftart ist eine davon.

Die von Ihnen verwendete Schriftart findet sich überall auf Ihrer Website und kann nicht nur die Lesbarkeit , sondern auch die gesamte Navigation verbessern. Wenn Ihre Typografie professionell aussieht und gut lesbar ist, bleiben Ihre Besucher eher auf Ihrer Website. Schriftarten werden oft übersehen, können aber eine große Wirkung haben.

Auch wenn Sie Schriftarten zu Ihrer Website hinzufügen können, möchten Sie vielleicht Typografie verwenden, die Sie auf herkömmliche Weise nicht finden. Das Internet ist voll von Websites mit schöner Typografie, die Sie vielleicht auf Ihrer Website verwenden möchten. Der schwierige Teil besteht jedoch darin, die Schriftarten zu identifizieren, die diese Websites verwenden. Es gibt keinen einfachen Weg, eine Schriftart zu finden, und selbst wenn Sie ein Experte sind, gibt es bei jeder Schriftart unzählige winzige Unterschiede. Darüber hinaus können diese Unterschiede durch Schriftartstile und CSS-Änderungen verstärkt werden.

Deshalb zeigen wir Ihnen in diesem Beitrag, wie Sie mit verschiedenen Tools herausfinden können, welche Schriftarten eine Website verwendet .

So identifizieren Sie Schriftarten von einer Website

Es gibt mehrere Möglichkeiten, Schriftarten auf einer Website zu identifizieren:

1. Verwenden des Prüfwerkzeugs
2. Mit Plugins
   1. FFFFallback
   2. Quelle
   3. Fontanello
   4. Welche Schriftart

Einige davon sind schwieriger zu verwenden als andere und einige erfordern möglicherweise externe Tools und Erweiterungen. Werfen wir einen genaueren Blick auf all diese verschiedenen Methoden.

1) Identifizieren Sie Schriftarten mit dem Inspect Tool

Die einfachste Methode zum Identifizieren von Schriftarten auf einer Website ist die Verwendung des Inspektionstools des Browsers . Dazu müssen Sie die Entwicklertools Ihres Browsers öffnen. Normalerweise können Sie dies auf verschiedene Arten tun:

• Drücken Sie F12 oder Strg+Umschalt+I in Ihrem Browser
• Öffnen Sie das Menü des Browsers, indem Sie mit der rechten Maustaste klicken und dann zu Inspect gehen
• Öffnen Sie die Developer Tool -Optionen im Menü des Browsers und gehen Sie zu Web Developer

Wenn Sie eine Schriftart finden, die Ihnen gefällt, klicken Sie mit der rechten Maustaste auf den Text, der die Schriftart enthält, die Sie identifizieren möchten, und klicken Sie auf Element untersuchen.

Dieses Element wird im Inspektor-Tool hervorgehoben, und Sie sehen die Stile und Layouts in den Feldern neben dem Inspektor.

Klicken Sie dann auf die Registerkarte Berechnet und scrollen Sie nach unten, um das Feld Font-Family zu überprüfen. Dieses Feld sollte die Schriftart der Website auflisten. In diesem Beispiel ist die Schriftart beispielsweise Roboto oder SF-Pro Display.

Auf diese Weise können Sie Schriftarten auf jeder Website mit dem Inspector-Tool identifizieren. Möglicherweise finden Sie jedoch Websites, auf denen Sie nicht mit der rechten Maustaste klicken oder auf das Inspektor-Tool zugreifen können, weil sie dies nicht zulassen. Wenn das der Fall ist, gibt es eine andere Alternative. Mit einem speziellen Tool können Sie auch sehen, welche Schriftart die Website verwendet.

Werfen wir einen Blick auf einige der besten Plugins, die Sie verwenden können, um Schriftarten von einer Website zu identifizieren.

2) Identifizieren Sie Schriftarten mit Tools und Plugins

Wenn Sie das Inspektor-Tool auf einer Website nicht verwenden können, identifizieren Sie Schriftarten mit speziellen Tools und Plugins. Es gibt verschiedene Tools. Um Ihnen das Leben zu erleichtern, listen wir die besten auf und zeigen Ihnen, wie Sie sie verwenden können, um Schriftarten zu finden und zu erkennen, die auf verschiedenen Websites verwendet werden.

2.1) FFFFallBack

FFFFallback ist ein einfaches Bookmarklet-Tool, mit dem Sie Schriftarten auf jeder Website identifizieren können. Und das Beste daran ist, dass Sie nichts installieren müssen. Sie müssen das Bookmarklet einfach auf Ihrer Lesezeichen-Registerkarte speichern und auf einer beliebigen Website auf das Lesezeichen klicken, um die Schriftarten zu überprüfen. Das Tool verwendet Javascript, um das CSS zu scannen und die Typografie sowie den Schriftstil zu identifizieren.

Um dieses Tool zu verwenden, müssen Sie diese Seite öffnen. Klicken Sie dann auf die Schaltfläche FFFFALLBACK und ziehen Sie sie wie unten gezeigt in Ihre Lesezeichenleiste. Wenn die Lesezeichenleiste in Ihrem Browser nicht angezeigt wird, drücken Sie Strg+Umschalt+B , um sie zu aktivieren.

Öffnen Sie nun eine Website, auf der Sie Schriftarten identifizieren möchten, und klicken Sie auf das Bookmarklet , das Sie gerade in Ihrer Lesezeichenleiste gespeichert haben. Es sollte Ihnen die Schriftfamilie und den Stil der Website in einer neuen Spalte zeigen, wie unten gezeigt. Stellen Sie sicher, dass Sie Webfont als Option oben auswählen.

2.2) Quelle

Fount ähnelt FFFFALLBACK, aber Sie können damit auch Schriftarten bestimmter Texte überprüfen. Auf diese Weise können Sie angeben, für welche Texte Sie Schriftarten prüfen möchten.

Um Fount zu verwenden, gehen Sie zu dieser Website und speichern Sie das Bookmarklet von der Website, indem Sie es auf die Registerkarte „Lesezeichen“ ziehen.

Öffnen Sie dann eine beliebige Website, für die Sie die Schriftarten überprüfen möchten, und klicken Sie auf das Lesezeichen „Font“. Dadurch ändert sich Ihr Cursor in ein Plus. Klicken Sie einfach auf einen beliebigen Text, und die identifizierte Schriftart wird oben rechts auf Ihrem Bildschirm angezeigt.

Nachdem Sie die Schriftart für diesen Text kennen, können Sie erneut auf das Feld Schriftart klicken, um den Cursor zu deaktivieren und Ihre Seite wie gewohnt weiter zu durchsuchen.

2.3) Fontanello

Wenn Sie lieber Browsererweiterungen verwenden, ist Fontanello das perfekte Tool für Sie, um Schriftarten von jeder Website zu identifizieren. Installieren Sie einfach die Fontanello-Erweiterung auf Chrome oder Firefox und aktivieren Sie sie.

Um Schriftarten auf einer Website zu identifizieren, klicken Sie einfach mit der rechten Maustaste auf einen beliebigen Text und wählen Sie die Option Fontanello aus. Das Dropdown-Menü zeigt Ihnen die Schriftfamilie sowie deren Stil und Varianten.

2.4) Welche Schriftart

Alternativ können Sie die WhatFont- Erweiterung auf ähnliche Weise verwenden. Installieren Sie zuerst die Erweiterung entweder in Chrome oder Firefox. Klicken Sie dann auf das Symbol des WhatFont-Werkzeugs in der Symbolleiste Ihres Browsers und klicken Sie auf einen beliebigen Text, um die Schriftart zu überprüfen. Das Gute ist, dass Sie verschiedene Texte auswählen und gleichzeitig sehen können, welche Typografie sie verwenden.

Wenn Sie fertig sind, drücken Sie WhatFont verlassen , um die Schrift-Popups zu schließen und die Webseite wie gewohnt zu verwenden.

Nachdem wir nun gesehen haben, wie man Schriftarten aus Text erkennt, fragen Sie sich vielleicht, ob es möglich ist, dasselbe mit Bildern zu tun. Die Antwort ist ja! Mal sehen, wie man das macht.

So identifizieren Sie Schriftarten aus einem Bild

Abgesehen davon, dass Sie Schriftarten aus Text entdecken, können Sie auch Schriftarten von einer Website anhand der Bilder identifizieren. Dazu verwenden wir ein Online-Tool namens WhatTheFont .

Was die Schriftart

Mit diesem Online-Tool können Sie jedes Bild hochladen, den Text des Bildes analysieren und Ihnen mitteilen, welche Schriftart verwendet wird.

Gehen Sie dazu auf diese Seite und ziehen oder laden Sie das Bild auf das Tool hoch (stellen Sie sicher, dass es im JPG- oder PNG-Format vorliegt). Definieren Sie dann das Zuschneidefeld für den Text, und das Tool zeigt Ihnen die richtige Schriftart des Text. Darüber hinaus bietet Ihnen WhatTheFont auch Websites, auf denen Sie die Schriftarten kaufen können, und Sie können die Schriftarten sogar mit Ihrem benutzerdefinierten Text testen.

Auf diese Weise können Sie Schriftarten von Bildern oder Screenshots überprüfen. Darüber hinaus verfügt es über eine mobile App, mit der Sie auch Schriftarten von Ihrem Handy aus identifizieren können.

Fazit

Alles in allem kann die von Ihnen verwendete Schriftart einen großen Einfluss auf Ihre Website haben. Es kann Ihnen helfen, die Lesbarkeit und die allgemeine Navigation zu verbessern und Ihre Besucher länger dort zu halten. Klarheit und Lesbarkeit sind wichtige Aspekte jeder Website und je mehr Mühe Sie darauf verwenden, desto besser werden die Ergebnisse sein.

In diesem Leitfaden haben wir verschiedene Möglichkeiten zum Identifizieren von Schriftarten auf einer Website gesehen:

• Mit dem Browser-Inspect-Tool
• Verwenden von Bookmarklet-Tools
• Durch Browsererweiterungen
• Verwenden dedizierter Online-Tools zum Identifizieren von Schriftarten aus Bildern

Sobald Sie die richtigen Schriftarten gefunden haben, liegt es an Ihnen, zu entscheiden, wie Sie sie zu Ihrer Website hinzufügen. Nachdem Sie die Typografie ausgewählt haben, die Sie verwenden möchten, empfehlen wir Ihnen, einen Blick auf unsere Anleitung zum Ändern der Schriftart in WordPress zu werfen, um im Handumdrehen zu Ihrer neuen Schriftart zu wechseln.

Wenn Sie nach weiteren Möglichkeiten suchen, die Lesbarkeit und Navigation auf Ihrer WordPress-Seite zu verbessern, können Sie sich auch diese Artikel ansehen:

• So fügen Sie Breadcrumbs in WordPress hinzu
• Organisieren Sie WooCommerce-Produkte nach Marke
• So fügen Sie ein WordPress-Megamenü hinzu

Haben Sie neue Schriftarten entdeckt? Welche Methode hast du verwendet? Lassen Sie es uns im Kommentarbereich unten wissen!