Google Fonts lokal einbinden (WordPress)

Bei der Einrichtung einer neuen Website beziehungsweise dem Programmieren eines neuen WordPress Themes gibt es viele obligatorische Schritte. Seit einigen Monaten gehört der Schritt Google Fonts lokal einbinden ebenfalls zu.

Sofern man nicht auf eine andere Schriftart ausweicht oder das Risiko einer Abmahnung eingehen möchte, sollten externe Schriftarten auf dem eigenen Server gehostet werden. Selbstredend gibt es da draußen abertausende von Fonts, aber dieser Artikel behandelt das prominente Beispiel der lokal gehosteten Google Fonts.

Wieso müssen Google Fonts überhaupt lokal eingebunden werden?

Bindet man Google Fonts oder andere Schriftarten dynamisch ein, wird mindestens beim ersten Seitenbesuch eine Verbindung zu einem externen Server hergestellt, um die eingebundenen Schriftarten herunterzuladen und auf der eigentlichen Website bereitzustellen.

Für diesen Vorgang wird unter anderem die IP-Adresse des Seitenbesuchers an Google Font Server weitergegeben. Andernfalls kann die Schriftart nicht angezeigt werden. So funktioniert halt das Internet. Ob und inwiefern noch weitere Daten übermittelt werden, hängt vom jeweiligen Dienst ab. Allerdings verstößt die unerlaubte Weitergabe der IP-Adresse bereits gegen die DSGVO. Da sich bereits etliche Blogger und Juristen zu diesem Thema die Finger wund getippt haben, habe ich eine ausführlichere Erklärungen kurzerhand am Ende dieses Artikels verlinkt.

Man kann das Problem der dynamisch eingebundenen Google Fonts zwar umgehen, indem man das Laden von externer Schriftarten optional beziehungsweise zustimmungsbedürftig gestaltet. Also ähnlich wie ich es auf diesem Blog mit der Einbindung von YouTube Videos oder aber dem Script von Google Analytics handhabe. Allerdings üben viele Seitenbesucher ihr gutes Recht aus und akzeptieren beim Seitenbesuch lediglich essenzielle Cookies. Das ist für viele Seitenbetreiber allerdings ein Problem, da die die Website nun nicht mehr im eigentlich beabsichtigen Design ausgespielt wird. Extern gehostete Google Fonts fallen nach meinem Verständnis auch nicht in die Kategorie der essenziellen Cookies. Da die Website-Inhalte auch in einer anderen Schriftart dargestellt werden können.

Um also eine Abmahnung sicher vorbeugen zu können, bleiben lediglich mir zwei bekannte Optionen übrig. Entweder ich verzichte auf den Einsatz von Google Fonts in meinem Blog und greife auf eine der Standardschriftarten zurück (sogenannte Web Safe Fonts) oder aber ich binde Google Fonts lokal für meine WordPress Installation ein.

Check: sind auf meiner Seite Google Fonts eingebunden?

Wenn man sein WordPress-Theme nicht selbst schreibt, ist beziehungsweise war die Wahrscheinlichkeit relativ hoch, dass das entsprechende Theme an irgendeiner Stelle Google Fonts eingebunden hat.

Um herauszufinden, ob Google Fonts auf der eigenen Website eingebunden sind, kann man folgendermaßen vorgehen:

Entweder öffnet man auf der Seite per Rechtsklick das Kontextmenü und lässt sich dann den Seitenquelltext anzeigen. Hier sucht man dann gezielt nach Verweisen auf Schriftarten. Diese können in der Regel durch den URLs fonts.googleapis.com oder fonts.gstatic.com identifiziert werden.

Alternativ kann man auch die Entwickler-Tools (Google Chrome) nutzen, um herauszufinden, ob eine Website Google Fonts verwendet. Hierzu öffnet man erneut per Rechtsklick das Kontextmenü und wählt die Option Element untersuchen aus. Im sich nun öffnenden Entwickler-Panel wählt man den Tab Netzwerk aus. Nun sollte die Seite ggf. noch einmal aktualisiert werden. Anschließend sucht man im Tab Netzwerk nach Anfragen an die URLs fonts.googleapis.com oder fonts.gstatic.com.

In beiden Fällen gilt: wird man fündig, lädt die betreffende Website Google Fonts von einem externen Server. Es besteht also dringender Handlungsbedarf.

Nicht via Anwaltsseite prüfen (Wenn paranoid, dann aber richtig)

Ich möchte an dieser Stelle niemanden unter Generalverdacht stellen. Dennoch würde ich nicht empfehlen, die eigene Seite mit einem kostenlosen Tool auf die Nutzung von Google Fonts zu testen, sofern man dem Anbieter des Tools nicht zu 100% vertraut.

Diese Tools können in der Regel nicht mehr, als man mit den beiden vorgestellten Methoden herausfinden könnte. Vielleicht bin ich an der Stelle auch zu paranoid. Aber im schlechtesten Fall hat man sich durch die Nutzung eines solchen Tools mit der eigenen Seite direkt bei einer windigen Anwaltskanzlei für eine Abmahnung beworben.

Wie entferne ich Google Fonts aus meinem WordPress Theme?

Diese Frage kann man leider nicht pauschal für alle WordPress Themes beantworten.

Wenn du bereits dein eigenes WordPress Theme nutzt, weißt du natürlich, an welchen Stellen du Google Fonts eingebunden hast.

Hast du dir ein WordPress Theme gekauft oder nutzt eines der vielen kostenlosen WordPress Themes, würde ich dir empfehlen in der functions.php und der style.css deines Themes nachzuschauen. Mit einer Suche nach der typischen URL fonts.googleapis.com dürftest du die Stellen im Quellcode relativ schnell identifizieren und entfernen können. Du solltest aber daran denken, dass diese Änderungen in der Regel bei jedem Update deines Themes überschrieben werden, sofern du kein Child-Theme angelegt hast.

In welchem Umfang darf man Google Fonts lokal hosten?

Bevor man sich die Arbeit macht und Google Fonts lokal in das eigene WordPress Theme einbindet, sollte vielleicht noch geklärt werden, in welchem Umfang Google Fonts überhaupt genutzt werden dürfen. Wie sieht also die Lizenzvereinbarung bei der Nutzung von Google Fonts aus?

Google Fonts werden unter der SIL Open Font License (OFL) veröffentlicht, die es ermöglicht, die Schriftarten für private und kommerzielle Projekte kostenlos zu nutzen. Die OFL ist eine freie Software-Lizenz, die die Verwendung, Änderung und Verteilung der Schriftarten erlaubt, solange sie unter der gleichen Lizenz veröffentlicht werden.

So bindet man Google Fonts lokal in WordPress ein

Um Google Fonts lokal in WordPress einzubinden gibt es wiederum zwei Optionen.

Option A: Google Fonts per WordPress Plugin einbinden

Option A besteht in der Nutzung eines Plugins. Diese Option bietet sich an, wenn man wenig bis keine Erfahrung mit der programmiertechnischen Anpassung von WordPress hat.

Fonts Plugin | Google Fonts Typography: Dieses Plugin ermöglicht die Auswahl aus über 1000 Google Fonts, das lokale Hosten von Google Fonts und den Upload von Custom Fonts.
Use Any Font | Custom Font Uploader: Mit diesem Plugin kann man beliebige Schriftarten hochladen und auf der eigenen WordPress Website verwenden, einschließlich Google Fonts.

Option B: Plugins? Nein danke!

Da ich über geringfügige Programmierkenntnisse verfüge, wähle ich Option B und verzichte auf den Einsatz eines Plugins. Hierfür sind einige kleine Schritte notwendig.

Font Package wählen, herunterladen & entpacken

Zuerst hat man auf fonts.google.com die Qual der Wahl und muss sich eine passende Schriftart aussuchen. Anschließend lädt man das komplette Paket oder lediglich die gewünschten Schriftarten (Fontweight und Styles) herunter, entpackt diese und legt diese im Verzeichnis des eigenen Themes ab. Wer es gerne ordentlich hat, erstellt an der Stelle noch einen Unterordner für künftige Schriftarten. Ich habe einen Unterordner namens Fonts angelegt, da ich auch die Font Awesome Icons lokal hoste.

Font in style.css laden

Damit der Font auch genutzt werden kann, muss dieser noch geladen werden. Hierfür gibt es mehrere Variante. Ich arbeite aktuell lediglich mit einer einzigen CSS Datei (style.css), die ich über die functions.php eingebunden habe.

Da man jede einzelne Variante des Fonts (Font Weight und Style) einbinden muss, bietet es sich an lediglich die Varianten einzubinden, die man später auch tatsächlich nutzen möchte. Ansonsten wird die style.css sehr schnell, sehr lang und vor allem unübersichtlich. Einige Developer binden die Fonts auch in eine eigene fonts.css ein, die man dann wiederum separat in der functions.php einbinden muss.

Anbei noch ein kurzes Beispiel, wie man eine Font-Variante in der style.css einbindet.

/* ### FONTS ### */
/* open-sans-300 - latin */
@font-face {
    font-display: swap;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url('https://danielbeuing.de/wp-content/themes/db-blog-theme/fonts/opensans/open-sans-v34-latin-300.woff2') format('woff2'),
        url('https://danielbeuing.de/wp-content/themes/db-blog-theme/fonts/opensans/open-sans-v34-latin-300.woff') format('woff');
}

CSS über die functions.php einbinden

Ich bin mir hier nicht komplett sicher, allerdings wird die style.css im Verzeichnis eines Themes meines Wissens nach automatisch erkannt. Daher wäre der folgende Schritt eigentlich überflüssig. Dennoch ist es auf Dauer eine gute Praxis, für CSS, Fonts und JS eigene Unterordner anzulegen, um das eigene Theme sauber zu halten.

Nichtsdestotrotz hier noch der Beispielcode zur Einbindung der style.css über die functions.php:

### CUSTOM CSS ###
function custom_styles() {
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'custom_styles' );

Fonts den richtigen CSS-Klassen zuweisen

Nutzt man im gesamten Blog lediglich nur eine Schriftart, kann man diese eigentlich auf höchster Ebene als Standardschriftart definieren, um sich das Zuweisen der richtigen Schriftart bei jedem Element zu sparen.

Ich nutze in diesem Blog allerdings aktuell zwei Schriftarten. Schlagworte und Kategorien haben bei mir in der Regel den monofont Font. Daher weise ich in meiner CSS Datei jedem Element direkt die zu verwendende Schriftart zu. Das ist sicherlich nicht optimal und müsste auf Dauer überarbeiten werden. CSS-Dateien sind zwar relativ schlank, aber redundanter Code ist unnötiger Code.

Um das Problem zu lösen, könnte ich beispielsweise in der CSS Datei über die html oder body Klasse die Schriftart Open Sans an alle hierarchisch tiefer liegenden Klassen vererben. Ausnahmen, wie die Klassen für Schlagworte oder für Kategorien würden dann mithilfe des Zusatzes !important durch die Schriftart monofont überschrieben werden.

FTP Upload & finaler Check

Zu guter Letzt muss man seine Änderungen an der style.css natürlich noch hochladen und mit den oben genannten Methoden prüfen, ob die Google Fonts nun korrekt lokal eingebunden sind. Sofern man Caching-Plugins nutzt, sollte man vor dem Test sichergehen, dass der Cache einmal vollständig neu geladen wurde.

(Option C: Websafe Fonts)

Eine weitere dritte Option stellen Websafe Fonts dar. Diese sind in der Regel auf den meisten Endgeräten vorinstalliert und müssen daher nicht gesondert eingebunden werden. Ich konnte dies für den von mir genutzten Open Sans Font leider nicht zu 100% beantworten. Scheinbar habe viele Endgeräte diesen Font vorinstalliert, aber zur Sicherheit liefere ich diesen gleich noch über meine Website mit.

Option D: WordPress Version 6.5

Mit dem kürzlich erschienen Update bzw. der WordPress Version 6.5 können im Standardtheme Twenty Twenty-Four auch Custom Fonts hochgeladen, verwaltet und eingebunden werden.

Generell bin ich ein großer Fan dieses Themes, da dies eine der letzten kostenlosen Bastionen im WordPress Universums darstellt und sich ohne großen Aufwand ähnlich wie Elementor, Avada und co. customizen lässt.

Für weitere Infos zum letzten WordPress Update einfach die weiterführenden Links auschecken.