Bilder sind das A und O einer Website, das ist mittlerweile wahrscheinlich jedem von Ihnen bewusst. Dennoch dürfen Texte, als das Herz einer Website, nicht zu kurz kommen. Was genau Web-Fonts sind und wie Sie sie finden/einbinden können, erfahren Sie hier.

Schriften soweit das Auge reicht

Schriftarten, die im digitalen Fonts genannt werden, sind in etwa so schwer zu zählen wie WordPress-Themes und Plug-ins. Zu jedem Webdesign gehört mindestens eine, manchmal auch zwei ausgewählte Schriften, welche für Überschriften und Fließtexte festgelegt sind.

Von web-sicheren Fonts zu Web-Font

Zu Beginn des Webdesigns waren Websites noch weit davon entfernt, sich durch ihre Schriftart von anderen Seiten zu unterscheiden. Das lag daran, dass zunächst nur wenige Schriften (Arial, Times New Roman, Verdana etc. ) auf wirklich allen Computern installiert waren. Diese Standardschriften wurden, auf Websites eingebunden, allen Besuchern immer korrekt angezeigt und erhielten daher den Namen „web-sichere Fonts“. Der Nachteil: Diese Schriften wurden zu häufig genutzt und wirkten schnell eintönig und wenig kreativ.
Natürlich existierten bereits damals auffällige und selten genutzte Schriften, die in dem Meer aus Standardschriften herausstechen konnten. Allerdings war bei ihnen die Wahrscheinlichkeit sehr gering, dass sie auch auf allen Besucher-Computern installiert waren. Nutzte man für seine Website eine solche Schrift, so änderten Besucher-Computer, die diese Schrift nicht installiert hatten, diese ganz einfach zu einer Standardschrift wie Arial oder Verdana. Das hatte zur Folge, dass das Layout zerschossen wurde und/oder unsauber wirkte, immerhin basierte es auf einer vollkommen anderen Schrift.
Mit den sogenannten Webfonts änderte sich das zum Glück. Diese Schriften werden heutzutage online im Internet, statt lokal auf dem Computern aufbewahrt und laden automatisch mit dem Inhalt der Website. So wird sichergegangen, dass jede Website immer in der Schrift dargestellt wird, die man für sie vorgesehen hat.

Den passenden Web-Font bei Google Fonts finden

Nun ist es keine große Herausforderung mehr, ausgefallene Schriften auf seiner Website einzubinden. Natürlich haben sich mit der Zeit verschiedene Quellen gebildet, an denen man nach Web-Fonts suchen, sie erwerben und für seine Website nutzen kann. Manche Web-Fonts sind frei verfügbar, andere lizenziert und kosten dementsprechend viel Geld. Kostenlose Web-Fonts können Sie ganz leicht über fontsquirrel.com oder Google Fonts suchen, kostenpflichtige gibt es wiederum auf Seiten wie fonts.com.

Ein Überblick: Die Google Fonts Benutzeroberfläche

Wollen Sie sich nun auf die Suche nach einer passenden Schrift machen, so können Sie beispielsweise Google Fonts nutzen, um einen unter Preview Text eingegebenen Text in verschiedenen Schriften darstellen zu lassen. Sie können in der Seitenleiste verschiedene Eigenschaften der Schrift angeben, unter anderem Schriftstärke, Schriftlage und Schriftbreite.
Unter All Categories finden Sie weitere Eigenschaften von Schriften, die wir ihnen hier kurz erklären werden:

• Serif: Serifen-Schriften sind mit Serifen verzierte Schriften. Die Verzierungen sind am Anfang und Ende eines Buchstabenstrichs zu finden. Dort lassen sich kleine, feine Linien erkennen, die einzelne Buchstaben teilweise miteinander verbindet. Eine typische Serifenschrift ist Times New Roman.
• Sans-Serif: „Sans“ ist das französische Wort für ohne, daher bedeutet Sans-Serif ganz einfach ohne Serifen. Die meisten Serifenlosen Schriften haben Sans bereits im Namen stehen, wie z.B Open Sans.

• Display: Mit dieser Option erhält man vor allem Schriften, die auffallen sollen, wenn es beispielsweise um Ankündigungen geht. Diese Schriften werden selten (bis nie) als Schriften für Fließtexte benutzt, da sie nur in großen Schriftgrößen und einzelnen Worten richtig wirken.
• Handwriting: Wie der Name schon vermuten lässt, bestehen Schriften dieser Kategorie aus besonders stark geschwungenen Linien. Sie wirken wie von Hand geschrieben und elegant, weshalb sie beispielsweise für das Anmuten von Briefen verwendet werden.

• Monospace: Diese Schrift hat sich aus der Schreibmaschinen- und der frühen Bildschirmschrift entwickelt. Die Besonderheit an ihr ist, dass alle Buchstaben die Selbe Breite haben und die gesamte Schrift auseinander gezogen wirkt. Heute wird diese Schrift hauptsächlich zum Darstellen von Rechnungen genutzt.

Für einen guten Fließtext- und Überschriften-Font sollte also immer nach Serifen- oder Serifenlosen Schriften gesucht werden, die übrigen Kategorien lassen sich für spezielle Wünsche im Hinterkopf behalten.

 Haben Sie eine passende Schrift für sich entdeckt, können Sie sich diese über Add to collection merken. Mit dem Download-Button laden Sie dann alle gemerkten Schriften bei Bedarf als ZIP-Datei herunter. Im folgenden erklären wir die Einbindung der Fonts direkt von Google.

Der Download-Button eines Google Fonts

Einen Font in über die header.php in WordPress einbinden

Über die header.php Ihres Child-Themes ist es sehr einfach, eine neue Schrift einzubinden. Wenn Sie wissen möchten, wie Sie ein Child-Theme anlegen, lesen Sie unseren Beitrag „Child-Themes: Wenn WordPress-Themes Kinder kriegen„. Ansonsten suchen Sie nun die gewünschte Schrift bei Google Fonts aus und klicken auf folgenden Button:

Zur Übersicht der Schriftart

Nun werden Sie auf die Übersichtsseite der Schriftart geleitet. Hier finden Sie einige interessante Informationen, unter anderem, welche Styles für Ihre Schrift verfügung stehen. Außerdem können Sie unter Punkt 3 den aufgeführten Code kopieren und direkt in die header.php einfügen. Er sollte direkt nach dem head-Tag eingefügt werden, damit die Einbindung der Schrift reibungslos funktioniert.

Der Code zum Einbinden in die header.php

Um die Schriftart den passenden Texten zuzuordnen, müssen Sie den CSS-Code Ihres Themes anpassen. 
Das können Sie auf verschiedenen Weisen tun, Sie können zum Beispiel die Styles.css Ihres Child-Themes nutzen, um CSS-Code einzufügen. Oder Sie installieren sich das praktische Plug-in Simple Custom CSS, in dem Sie CSS-Anpassungen ganz unabhängig vom Child-Theme eintragen können.
Mit diesem Code ändern Sie zum Beispiel manuell die Schriftart Ihrer Überschriften:

h1, h2, h3, h4, h5, h6 {font-family: ‚DerNameIhresFonts‘;}

Einen Google Font per Plug-in einbinden

Wem das zu umständlich ist, oder wer sich in CSS nicht sicher genug fühlt, kann hingegen auch das Plug-in WP Google Fonts installieren. In diesem praktischen Plug-in können Sie aus allen Google Fonts die gewünschte Schrift auswählen und ganz einfach all den Elementen zuteilen, die ab sofort in der besagten Schrift angezeigt werden sollen. Es lassen sich in dem Plug-in bis zu 6 Fonts einstellen.

Alle Einstellungen des Plug-ins

Fazit

Heutzutage ist es sehr einfach, einen Web-Font in WordPress einzubinden und auszuwählen. Versuchen Sie es selbst und kosten Sie die Möglichkeiten aus, die Ihnen Websites wie Google Fonts bieten. Ein kleiner Tipp zum Schluss: Wer sich nicht sicher ist, welche Schriften man miteinander kombinieren sollte, kann unter fontpair.co Anregungen sammeln.

Quelle Bilder: Eigene Screenshots