Google Fonts

Google Fonts richtig in WordPress einbauen


Langweilige Standardschriftarten wie Arial oder Times New Roman auf seiner Webseite muss niemand mehrverwenden. Google bietet mit seinem Service „Google Fonts“ unzählige Web-Fonts kostenlos in die eigene Webseite einzubinden. Wie das geht, erkläre ich hier.

Die passende Web-Fonts bei Google Fonts finden

Einige Schriftarten für Fließtexte, sieht man immer wieder: Open Sans, PT Sans, etc. Diese Schriftarten eignen sich für sehr viele Webseiten, da sie den Fließtext sehr klar und gut lesbar auf verschiedenen Designs präsentieren. Sie wollen eine gesonderte Schriftart für die Headline oder eine andere Web-Front? Suchen Sie bei Google Fonts.

Auch zu kostenpflichtigen Schriftarten findet man hier die passende kostenlose Alternative.

Die nötigen Schnitte bei Google Fonts auswählen

Ein Schriftschnitt ist eine Variation einer Schriftart. Hier wird meist unterschieden zwischen thin (dünn), normal, kursiv, bold (fett).

Es kann aber durchaus mehr Schnitte einer Schriftart geben. Um alle Schnitte sauber auf einer Webseite verwenden zu können, so dass der Browser diese Darstellungen nicht durch HTML oder CSS Auszeichnungen unsauber simulieren muss, lädt man sich alle nötigen Schriftschnitte herunter oder bindet diese direkt in die Webseite ein. Aber Vorsicht: Hier wenn möglich sparsam umgehen, da jeder Schriftschnitt gesondert geladen werden muss, die Ladezeit einer Website kann durchaus negativ beeinflusst werden.Suchen Sie zuerst die gewünschte Schrift über das Suchfeld und wählen dann diese über das + Zeichen „Select this font“ aus:

Google Fonts

Im 2. Schritt wählen Sie die Schnitte aus:

Google Fonts

Einbauen von Google Fonts im Header der WordPress-Webseite

Um die Webfonts im Header einzubinden, kopiert man sich auf vorheriger Seite den Code unter 3. im ersten Tab. Diesen fügt man im Head-Bereich der header.php im Ordner des WordPress-Themes ein. Beispielcode der „Open Sans“:

Google Fonts

Einbau von Google Fonts per CSS

Google Fonts können auch per CSS eingebunden werden. Hierzu kopiert man sich auf vorheriger Seite den Code unter 3. im zweiten Tab und fügt diesen in der style.css im Ordner des WordPress-Themes ein. Beispielcode der „Open Sans“:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

Einbau von Google Fonts mit Hilfe von JavaScript

Abschließend kann man Google Fonts auch über JavaScript in eine Webseite einbinden. Hierzu kopiert man sich auf vorheriger Seite den Code unter 3. im dritten Tab. Diesen Code fügt man entweder im Head-Bereich oder in der footer.php ein.

Empfehlung: Den Code in die header.php einbinden, da es ansonsten zu unschönen Renderproblemen kommen kann, die Seite lädt langsam und erst zum Schluss wird die Schrift nachgeladen.

Google Fonts

Dynamisches einbauen von Google Fonts im Header des WordPress Themes

Verwendet man ein Child-Theme in WordPress, sollte man wenn möglich die Google Fonts dynamisch laden, damit man bei Updates des Eltern-Themes nicht immer wieder die Theme-Dateien neu anpassen muss. Gerade die header.php wird des Öfteren mal geändert.

Kopiert man sich diese in seinen Child-Themes-Ordner, kann man dieses Template zwar überschreiben, muss allerdings dennoch bei Updates darauf achten, dass die header.php des Eltern-Themes und des Child-Themes bis auf die gewünschten Änderungen identisch sind. Das kann durchaus arbeitsintensiv werden. Daher besser die Schriften dynamisch über die functions.php laden:

Funktion load_fonts () { wp_register_style ('googleFonts', 'http://fonts.googleapis.com/css?family=Open+Sans'); wp_enqueue_style ('googleFonts'); } add_action ('wp_print_styles', 'load_fonts');

Google Fonts und die Geschwindigkeit

Wie bereits erwähnt, haben Web-Fonts durchaus einen Einfluss auf Ladezeiten einer Webseite. Seien Sie daher wenn möglich sparsam bei der Verwendung dieser Schriften. Verwenden Sie nicht für jede Überschrift unterschiedliche Schriftarten. Bleiben Sie wenn möglich bei maximal 2 verschiedenen Fonts. Der User wird es Ihnen aufgrund kürzerer Ladezeiten und einheitlicherer Darstellung danken. Verwenden Sie aber auch nicht allzu viele Schnitte. In der Regel braucht man nicht alle.

Google Fonts und SSL

Verwendet man auf den Seiten auf denen Google Fonts eingesetzt werden ein SSL-Zertifikat, sollte man die Google Fonts ebenso per SSL einbetten. Ansonsten erhält man eine Sicherheits-Fehlermeldung.

Google Fonts und Umlaute

Manche Schriftarten auf Google Fonts sind nicht für den deutschsprachigen Raum geeignet, da evtl. Zeichen der Umlaute fehlen. Somit entstehen bei der Verwendung diese unschönen Darstellungsfehler. Verwenden Sie daher nur Schriftarten, die auch für den deutschsprachigen Raum gedacht sind.

Alternativen zu Google Fonts

Es gibt natürlich auch andere Anbieter kostenloser Web-Fonts. Hier ist zum Beispiel Adobe Web-Fonts zu nennen. Durchaus auch einen Blick wert.

Share this post