Schriftarten für Website nutzen - Das musst du 2022 wissen!

Jede Website hat Textinhalte. Denn Texte sind die Grundlage der Kommunikation auf Webseiten.

Und selbst wenn eine Website nur Fotos zeigen würde, so muss auch diese Website zumindest ein Impressum und eine Datenschutzerklärung in Textform haben.

Daher nutzt auch jede Website Schriftarten, um eben diese Texte in eine lesbare Schriftform zu bringen.

Daher möchte ich hier etwas grundlegendes Wissen über Schriftarten für Websites wiedergeben.

Inhalte Anzeigen

Grundlegendes zu Schriftarten für Websites

Als Schriftart (engl.: font) wird die grafische Gestaltung einer Schrift bezeichnet.

Es gibt bereits über zehntausend Schriftarten, die alle unterschiedlich sind, und es werden täglich mehr. Daher kann eine Auswahl auch mal etwas länger dauern.

Auf einer Website ist die Schriftart wie eine Art Unterschrift für deine Seite, sie gibt ihr sozusagen den letzten Schliff.

Sie sollte daher stets zum Thema des Inhalts der Webseite passen. Das bedeutet, für eine Website mit einem mehr kreativen Thema solltest du auch eine geschwungene, organische Schriftart wählen; zu einem eher ernsten Thema wie einer Rechtsberatung, eher eine Druckschriftart.

Versetze dich am besten in deine Zielgruppe herein und stell dir vor was sie ansprechend finden würde. Wichtig dabei ist allerdings, dass die von dir verwendete Schriftart immer gut auf Bildschirmen lesbar sein muss.

Eine schöne Übersicht von zeitgenössischen und historischen Schriftarten findest du hier. Wobei dies natürlich nur ein sehr kleiner Ausschnitt aller erhältlichen Schriftarten darstellt.

Systemschriftarten

Die meistverbreiteten Schriftarten sind die sog. Systemschriftarten.

So werden die Schriftarten bezeichnet, die in den Betriebssystemen von Microsoft oder Apple standardmäßig an Bord sind. Da sie somit bereits in (fast) jedem Computer, Tablet oder Smartphone an Bord sind, wurden und werden sie natürlich auch meistens von den Nutzern der Endgeräte genutzt. Daher wurden diese Schriftarten zu den am meisten genutzten Schriftarten.

Auch auf Websites werden diese Schriftarten sehr oft verwendet. Als Klassiker unter den Schriftarten für Internetseiten gelten Arial, Helvetica, Times und Verdana.

Der Vorteil bei der Nutzung von Systemschriften in deiner Website ist, dass kein Seitenbesucher Probleme beim Anzeigen deiner Webseite bekommt. Denn schließlich hat ja jeder Computer, jedes Tablet oder Smartphone auf dem deine Webseite angeschaut wird, diese Schriftarten standardmäßig bereits installiert.

Ein weiterer Vorteil ist, dass diese Schriften nicht geladen werden müssen, da sie bereits auf dem Computer des Seitenbesuchers vorhanden sind. Dies reduziert die Ladezeit der Website.

Willst du daher auf Nummer sicher gehen, dass beim Laden deiner Website keine Probleme mit Schriftarten auftauchen, dann nutzt du am besten eine dieser Systemschriftarten.

Möchtest du aber eben auch durch eine andere Schriftart auffallen, so musst du dir eine andere Schriftart zulegen. Dazu gibt es Schriftart-Bibliotheken/Marktplätze.

Schriftarten-Bibliotheken

Neben den Systemschriften als Standard-Schriftarten, kannst du noch weitere Schriftarten aus dem Internet von Schriftarten-Bibliotheken/Marktplätzen downloaden. Diese kannst du dann auch für deine Website nutzen.

Eine solche Schriftart-Bibliothek/Marktplatz ist z.B. DaFont. In dieser beliebten Bibliothek findest du über 43.000 Schriftarten zum Download. Eine Alternative ist Adobe Fonts, bei der du über 20.000 Schriftarten findest, dafür aber ein kostenpflichtiges Creative Cloud Abo abschließen musst. Weitere sind Fontspace (> 90.000 kostenlose Schriftarten), Font Squirrel (alle Schriftarten dort sind kommerziell nutzbare kostenlose Schriftarten) oder die größte Bibliothek MyFonts (> 130.000 Schriftarten).

Viele der Schriftarten in den Bibliotheken sind nur für den privaten Gebrauch kostenlos, aber es gibt auch etliche die auch für einen kommerziellen Gebrauch kostenlos sind. Dazu kannst du meist die Filter-Funktion nutzen, um danach zu selektieren. Die genauen Lizenzbedingungen findest du in der ZIP-Datei der jeweiligen Schriftart.

Webfonts

Neben der Nutzung von fest eingebundenen Schriftarten auf deiner Website, gibt es auch noch eine weitere Art, Schriften auf deiner Website zu nutzen. Das Ganze nennt sich Webfonts.

Webfonts musst du nicht auf deinen Webserver laden, denn sie werden zentral auf einem Webserver des Schriftarten-Anbieters gehostet. Sie liegen sozusagen im Internet (Web) und sind dort frei zugänglich, daher der Name Webfonts.

Die benötigten Schriftarten werden dann automatisch von dem Browser des Seitenbesuchers von dem Webserver des Schriftarten-Anbieters geladen und angezeigt. Daneben kannst du diese Schriftarten aber auch immer noch auf deinen Webserver laden und so als eingebundene Schriftart für deine Website nutzen.

Die meistgenutzten Webfonts sind von Google und nennen sich Google Fonts.

Diese Webfonts von Google gibt es bereits seit 2010 und sie bieten mittlerweile eine Auswahl von knapp über 1.000 Schriftarten (Stand 11.2020), welche sowohl privat als auch gewerblich kostenlos genutzt werden können. Beliebte Webfonts sind z.B. Open Sans, Roboto oder Montserrat.

Laut Google macht diese Technik den Aufruf deiner Internetseite schneller und sicherer.

Die Nebenwirkung dabei ist allerdings, dass dadurch bei jedem Seitenaufruf Daten über den Webseitenaufruf an Google übertragen werden. Dadurch könnte Google auch Daten (z.B. die IP-Adresse) von dem Nutzer deiner Internetseite erhalten, was du unbedingt in deiner Datenschutzerklärung berücksichtigen solltest um den Anforderungen der DSGVO zu genügen.

Willst du dies vermeiden, kannst du diese Webfonts natürlich auch kostenlos herunterladen und auf deine Internetseite laden, so wie du dies bei den fest eingebundenen Schriftarten machen musst. Dann wird keine Information bei Aufruf deiner Internetseite an Google übertragen.

Nutzbare Schriftarten deines Themes

Welche Schriftarten du standardmäßig direkt für deine Website verwenden kannst, dass entscheidet das von dir verwendete Theme.

Um das zu prüfen, gehst du in das WordPress Menü zum Punkt “Design” und dann zum Punkt “Customizer”. Im Customizer-Menü klickst du den Punkt “Typografie“. Dort kannst du die Schriftart der jeweiligen Sektionen wie Überschriften, Body, Menü etc. einstellen und dabei auch einsehen, welche Schriftarten überhaupt an Bord des Themes sind.

Im Theme GeneratePress* hast du z.B. die folgenden Systemschriftarten direkt an Bord: Inherit, Century Gothic, Comic Sans MS, Courier New, Georgia, Helvetica, Impact, Lucida Console, Lucida Sans Unicode, Palatino Linotype, Segoe UI, Tahoma, Trebuchet MS und Verdana. Daneben gibt es noch eine sehr große Auswahl an Google Schriftarten, die ebenfalls nutzen kannst.

Nutzung von weiteren eingebundenen Schriftarten

Möchtest du eine Schriftart nutzen, die weder eine Systemschrift noch eine Webfonts-Schriftart ist, dann solltest du die Schriftart auf deinen Webserver laden, damit sie beim Abruf deiner Webseite auch direkt vom Browser mit geladen werden kann. Nur so kannst du sicherstellen, dass die Schriftart auch von jedem Browser dargestellt werden kann.

Der Grund liegt darin: Wenn der Browser des Seitenbesuchers die Schriftart auf deinem Webserver nicht findet, sucht er sie auf dem Computer des Seitenbesuchers. Findet er sie dort auch nicht, nimmt er eine Standard-Schriftart, meistens Times New Roman. Und dies macht dir dann eventuell dein mühsam abgestimmtes Design deiner Webseite kaputt. Und das willst du ja gerade verhindern, wenn du extra keine Systemschrift wählst.

Gerade bei neuen, insbesondere Lizenz-pflichtigen Schriftarten kann dies durchaus passieren. Stelle daher insbesondere bei der Nutzung einer selten genutzten Schriftart sicher, dass du diese auf der Webseite hinterlegt hast, damit sie immer durch den Browser mit geladen und dargestellt werden kann.

Mehrere Schriftarten gleichzeitig nutzen

Für deine Internetseite kannst du auch mehrere Schriftarten parallel nebeneinander verwenden, jedoch solltest du nicht mehr als drei verschiedene Schriftarten nutzen, ansonsten wirkt die Seite zusammengewürfelt und es entsteht kein guter, professioneller Eindruck bei dem Seitenbesucher.

Neben dem negativen optischen Eindruck bei der Nutzung zu vieler Schriftarten, hat die Nutzung von zu vielen Schriftarten auch einen weiteren Nachteil.

Jede zusätzlich genutzte Schriftart verlangsamt die Ladezeit deiner Internetseite und dies wirkt sich nicht vorteilhaft auf das Google-Ranking deiner Internetseite aus.

Und nicht nur jede zusätzlich genutzte Schriftart, sondern auch jede Variation deiner genutzten Schriftart in Stärke, Laufweite, etc. (auch Schriftschnitt genannt) verlangsamt die Ladezeit.

Für die Schriftart bezogen auf die Ladezeit bedeutet dies somit „weniger ist mehr“.

Nutzung von Schriftarten in E-Mails

Da in E-Mails keine Schriftarten in der E-Mail-Datei mitgesendet werden können, solltest du bei deinem E-Mail-Verkehr keine ausgefallenen Schriftarten nutzen, sondern nur Standard-Schriftarten, die auf jedem Computer installiert sind.

Der Grund ist auch hier, dass wenn diese ausgefallene Schriftart nicht auf dem Computer des E-Mail-Empfängers installiert ist, sie ansonsten ebenfalls durch eine Standard-Schriftart, meistens Times New Roman ersetzt wird. Dies fällt bei E-Mails natürlich nicht so stark ins Gewicht wie bei Internetseiten, solltest du aber dennoch wissen.

Name einer genutzten Schriftart herausfinden

Hast du z.B. auf einer anderen Internetseite eine Schriftart gefunden, die dir sehr gut gefällt? Und nun möchtest du diese auch gerne für deine Internetseite nutzen? Aber leider weißt du nicht, wie sie heißt?

Kein Problem. Dies kannst du ganz leicht herausfinden.

Bei Webseiten kannst du einfach mit dem Browser die Website untersuchen, durch einen Rechtsklick und anschließenden Klick auf “Untersuchen”. In dem sich öffnenden Fenster findest du je nach Browser unter dem Punkt “Schriftarten”, “Fonts”, “Stile” oder ähnlichem, die auf der Website genutzten Schriftarten. Sehr schön dargestellt wird dies im Browser “Firefox” von Mozilla durch einen eigenen Tab mit dem Namen “Schriftarten”.

Aber selbst, wenn die Schriftart nicht als Text, sondern nur in von Form einer Bilddatei vorliegt gibt es Möglichkeiten.

Im Internet gibt es auch dafür kostenlose Tools, z.B. von MyFonts oder von What Font is.

Dazu musst du einen Screenshot (z.B. mit dem Snipping tool von Windows) von der Schriftart machen, oder beim Tool “What Font is” alternativ auch eine URL einer Bilddatei, in der die Schriftart zu sehen ist, in das Tool hochladen. Danach wirst du noch aufgefordert, einzelne Buchstaben mit den ersten Suchergebnissen zu vergleichen, um das Suchergebnis zu verbessern. Am Ende gibt das Tool dir die Schriftart aus, die die meisten Übereinstimmungen mit deiner gesuchten Schriftart hat.

Hinweis zur Werbung: 
Links die mit einem * gekennzeichnet sind, sind Partnerprogramm/Affiliate-Links. Kaufst du über diesen Link ein, erhalte ich eine kleine Provision. Der Preis für dich ändert sich nicht! Wenn dir mein Beitrag gefallen und hoffentlich sogar geholfen hat, würde ich mich freuen, wenn du mich auf diesem Wege unterstützt. Vielen Dank!

Schriftarten für Websites nutzen