Google Fonts in WordPress richtig nutzen

Wenn ihr euch mit dem Thema „Schriften im Internet“ ein wenig beschäftigt habt, stoßt ihr schnell auf Google Fonts. Google Fonts bietet eine breite Palette an frei nutzbaren Schriften im Web, die eure Internetseite typographisch aufwerten können. Wie ihr dieses Tool nutzen und konkret in eure WordPress-Internetseite einbauen könnt, zeigen wir euch in diesem Artikel.

Was sind Google Fonts?

Bei Google Fonts handelt es sich um eine Sammlung von frei nutzbaren Schriftarten, die ihr im Internet sowohl auf eurer Website als auch in euren Blogs völlig kostenfrei nutzen könnt. Alle angebotenen Schriften stehen Open Source zur Verfügung. Seit der Einführung 2010 hat sich Google Fonts nachhaltig einen Platz im Web gesichert und sein Sortiment an Schriften stetig erweitert. Mittlerweile findet ihr mehr als 800 Schriften bei Google Fonts.

Warum sind Google Fonts für euch interessant?

Früher konntet ihr nur wenige Schriften im Web frei nutzen. Die Auswahl an Open Source Schriften war sehr begrenzt oder ihr musstet teure Lizenzen zur Schriftnutzung erwerben. Für Eigentümer einer kleinen Website oder einer kleinen Nischenseite lohnte sich diese Investition meist nicht.

Mit Google Fonts steht euch eine umfangreiche Palette an Schriften zur freien Verfügung, mit der ihr euren Webauftritt noch individueller gestalten könnt.

Soviel zum allgemeinen Hintergrund. Nun möchten wir euch zeigen, wie ihr Google Fonts schnell und einfach in eure WordPress-Installation einfügen und von der großen Vielfalt an Schriften profitieren könnt.

Google Fonts über WordPress-Plugin hinzufügen

Ein einfacher Weg, Um Google Fonts in eurer WordPress-Installation zu nutzen, ist das Plugin „Easy Google Fonts“ aus dem Hause Titanium Themes. Mit Hilfe dieses Plugins könnt ihr nicht nur Google Fonts auf eurer Website einbinden, sondern auch die Zuweisung der Schriften spielend leicht über den „Customizer“ vornehmen.

Installiert euch zuerst über das Dashboard unter Plugins > Installieren das Plugin „Easy Google Fonts“. Dieses könnt ihr leicht oben rechts über das Suchfeld finden.

Installiert das oben rot eingerahmte Plugin und vergesst nicht, die anschließende Aktivierung, um das Plugin nutzen zu können.

Google Fonts über den Customizer z.B. im Divi-Theme zuweisen

Nachdem ihr das Plugin installiert und aktiviert habt, könnt ihr z.B. beim DIVI-Theme über den Customizer die Schriftarten aus Google Fonts den verschieden Elementen auf eurer Website zuordnen.

Den Customizer öffnet ihr unter Design > Themes > Anpassen (Button bei aktiviertem Theme). Je nach verwendetem Theme gibt es noch weitere Möglichkeiten den Customizer zu öffnen.

Hier noch eine Abbildung, wie das ganze bei DIVI ausschaut:

Sobald ihr den Customizer geöffnet habt, navigiert ihr zum Menüpunkt „Typography“ und anschließend auf „Default Typography “. Dort könnt ihr nun den Fließtext und die Überschriften H1-H6 verändern.

So funktioniert’s

Für unser Beispiel haben wir einmal den Fließtext (Paragraphs) als Element gewählt. Klickt auf den Button „Edit Font“, um die im nachfolgenden Bild linke Spalte der Einstellungsmöglichkeiten zu erhalten.

Für jedes weitere Element (H1-H6) sehen die Einstellungsmöglichkeiten identisch aus. Aus diesem Grund gehen wir nur auf die Einstellungen mit dem Beispiel „Fließtext“ ein.

Schauen wir uns die Einstellungsmöglichkeiten genauer im Detail an.

Schriftstil

Beginnen wir mit der ersten Spalte. Hierbei handelt es sich um die Einstellungen für den Schriftstil. Das bedeutet, ihr könnt in dieser Spalte den Schriftstil eures Fließtextes bestimmen. Schauen wir uns die zur Auswahl stehenden Felder einmal genauer an.

Font Family

Die Font Family beinhaltet die verschieden Schriftarten, die von Google Fonts zur Verfügung gestellt werden. Über das Drop-Down-Feld könnt ihr die gewünschte Schrift eurem Fließtext zuordnen.

Font-Weight/Style

Font-Weight steht für die Schriftstärke. Je höher der Wert der Font-Weight, desto kräftiger wird die Schrift dargestellt. Ihr könnt euch die Schriften mit ihren unterschiedlichen Schriftstärken auch unter Google Fonts ansehen.

Manche Font-Weights beinhalten zusätzlich noch verschiedene Varianten des Schriftschnitts mit kursiv (italic).

Text Decoration

Die Text Decoration steuert, ob eure Text unterstrichen (underline), durchgestrichen (line-through) oder überstrichen (overline) dargestellt wird. Je nach Anwendungsfall, zum Beispiel bei Verlinkungen, könnte eine Unterstreichung Sinn machen.

Text-Transform

Ihr habt die Möglichkeit, die Schreibweise eines Textes in HTML mittels CSS zu manipulieren. Somit könnt ihr zum Beispiel festlegen, dass alle Überschriften automatisch in der Großschreibweise dargestellt werden.

Folgende Auswahl-Möglichkeiten der Tranformation stehen euch zur Verfügung:

• Uppercase: Großschreibweise des gesamten Elements
• Lowercase: Kleinschreibweise des gesamten Elements
• Capitalize: Wortanfang in Großschreibung

Kurzes Beispiel dazu:

In WordPress wird der Titel in den meisten Fällen als Überschrift ausgegeben. Damit ihr die Titel in WordPress nicht an die Darstellung auf eurer Website anpassen müsst, könnt ihr diese Darstellung über die Einstellung Text-Transform manipulieren.

Die Uppercase-Tranformation kommt häufig bei Überschriften zum Einsatz, um diese noch deutlicher vom restlichen Kontext abzugrenzen.

Schriftlook

Wenn ihr auf den Reiter „Appearance“ (dt. Aussehen) wechselt, seht ihr die Einstellungsmöglichkeiten der mittleren Spalte. Über diese könnt ihr das Aussehen der Schrift verändern. Die ersten beiden Felder dienen der Bestimmung der Schriftfarbe und des Hintergrunds.

Font-Size

Die Font-Size regelt nichts anderes als die Schriftgröße. Die Angabe der Schriftgröße erfolgt in Pixel und handhabt sich genauso wie in einem Text-Editor.

Line-Height

Mit Hilfe der Line-Height wird die Zeilenhöhe festgelegt. Sind mehrere Zeilen untereinander vorhanden, lässt sich auf diesem Wege auch der Zeilenabstand, der sogenannte Durchschuss, festlegen.

Letter-Spacing

Über die Einstellung „Letter-Spacing“ könnt ihr die Abstände zwischen den einzelnen Buchstaben und Zeichen bestimmen.

Positionierung

Wechselt in den letzten Reiter der Einstellungsmöglichkeiten „Positioning“.

Margin

Über den Margin könnt ihr den Außenabstand eures Elements festlegen.

Padding

Über Padding könnt ihr den Innenabstand eures Elements festlegen.

Border

Ein Border ist nichts anders als ein Rahmen oder eine Umrahmungsgrenze.

Dieser wird in den Einstellungen in seine 4 Positionen (top, bottom, right und left) aufgesplittet. Ihr könnt nun genau definieren an welcher Position ihr einen Border wünscht und mit welcher Stärke (in Pixel) er dargestellt werden soll.

Durch die Aufsplittung in die 4 Positionen müsst ihr für einen Rahmen um das gesamte Element allen Positionen die Stärke des Borders zuweisen. Das ist etwas umständlich von den Entwicklern gelöst, ermöglicht euch dafür aber die volle Kontrolle der Border-Darstellung.

Zusätzlich könnt ihr über das Drop-Down-Feld „Style“ bestimmen, ob euer Border durchgezogen (solid), gestrichelt (dashed), gepunktet (dotted) oder doppelt gestrichelt (double) dargestellt werden soll.

Border-Radius

Der Border-Radius ist eine Eigenschaft des Borders. Erstellt ihr einen Border um euer gesamtes Element, entsteht dadurch ein Rahmen in Form eines Rechtecks mit spitzen Ecken. Weist ihr den einzelnen Border-Positionen nun einen Border-Radius zu, werden die Ecken abgerundet. Im unteren Beispiel wurde dem Element auf der rechten Seite ein Border-Radius von 15px auf allen Positionen zugewiesen.

Habt Ihr alle Änderungen eurerseits vorgenommen, speichert ihr die Anpassungen über den Button „Speichern & Publizieren“.

Spezielles Element im HTML-Baum verändern

Euch ist bestimmt aufgefallen, dass ihr über die Einstellungen „default Typography“ nur die Elemente Fließtext und Überschriften H1-H6 verändern könnt. Das Plugin bietet euch allerdings auch die Möglichkeit individuelle Elemente zu verändern. Beispielweise das Blockquote-Element.

Um ein individuelles Element zu verändern kehrt ihr auf das Dashboard zurück und navigiert zu Einstellungen > Google Fonts (rote markiert im folgenden Bild).

In dieser Ansicht könnt ihr neue Kontroll-Elemente hinzufügen, die ihr mit dem Google Fonts Plugin verändern möchtet. Dazu haben wir für das obere Beispiel bereits einen Kontroll-Namen (Blockquote) gewählt und eine neue Gruppe erstellt. Sobald ihr diesen Schritt beendet habt, sollte eure Ansicht derer in unserem Bild entsprechen, allerdings ohne die CSS-Selektoren (grün umrandet). Klickt in das Textfeld und tragt dort eure gewünschten Elemente ein. Die Eingabe eines weiteren Elements leitet ihr mit der Tabulator-Taste ein.

Vergewissert euch, dass ihr eure Änderungen gespeichert habt. Anschließende kehrt ihr in den Customizer zurück und wählt wie im obigen Schritt „Typography“ aus.

Dort wird nun eine neue Auswahl namens „Theme Typrography“ hinterlegt mit der ihr euer individuelles Element verändern könnt. Die Einstellungsmöglichkeiten sind dieselben wie bereits oben ausführlich beschrieben.