Das Einbinden von Google Fonts in die eigene Website ist eine feine Sache: Es geht einfach und die riesige Auswahl der Schriften gibt der Internetpräsenz einen individuellen Touch. Aber das ganze Leben ist ein Kompromiss: Nicht nur wird die Website verlangsamt, es drohen künftig auch Herausforderungen im Datenschutz in Verbindung mit DSGVO. In diesem Beitrag beschrieben wir, wie Sie die Vielfalt der Google Fonts trotzdem nutzen können und beide Probleme umgehen.

Hinweis: Dieser Beitrag ist ursprünglich bei uns im April 2018 erschienen. Da der Inhalt durch die Zuspitzung der Rechtslage aktueller denn je ist, haben wir ein paar Updates vorgenommen und den Artikel erneut veröffentlicht.

Was sind Google Fonts?

Google Fonts bietet Ihnen eine Auswahl aus fast 1.400 kostenlosen Schriften, die Sie nach Ihrem Geschmack und passend zu Ihrem Design auf Ihrer Website verwenden können. In den Anfangszeiten des Internets war man als Webdesigner mehr oder weniger auf die Fonts angewiesen, die die Betriebssysteme der Website-Besucher zur Verfügung stellten. Um mehr Vielfalt zu ermöglichen, wurde Ende der 1990er die Idee der „downloadbaren Schriftarten“ entwickelt. Als dann die Mehrheit der Browser die Einbindung externer Schriften in die eigene Website unterstützte, hat Google mit seinen Webfonts die Idee schnelle aufgegriffen und eine große Bibliothek „freier“ Schriften ins Netz gestellt.

Was spricht gegen die Einbindung von Google Fonts?

Geschwindigkeit

In Zeiten, wo wir (nicht zuletzt von Google gedrängt) darauf achten sollten, dass unsere Websites so schnell wie möglich laden, bieten extern eingebundene Ressourcen natürlich Optimierungspotenzial. Zwar hat Google sicherlich sehr schnelle Server, dennoch muss der Besucher beim Aufruf einer Website ein paar Sekundenbruchteile warten, bis die nötigen Dateien vom fremden Server geladen sind und die Website in voller Pracht angezeigt werden kann.

Datenschutz

Jedes Mal, wenn Sie eine Webseite aufrufen, die Google Fonts eingebunden hat, lädt Ihr Browser die benötigten Schriften vom Google Server oder „erkundigt“ sich, ob es eine Änderung der Schriften gegeben hat. Dabei werden im Hintergrund eine Menge Daten übertragen. Unter anderem landet die IP-Adresse des Besuchers auf den Google-Servern. Nicht zuletzt in Zeiten der Datenschutz-Grundverordnung DSGVO ein Problem.

LG München: Einbindung von Google Fonts verstößt gegen Datenschutzrecht

Im Urteil vom 20.01.2022 hat das LG München (Az. 3 O 17493/20) entschieden, dass eine Einbindung von Google Fonts, trotz Berufung auf ein berechtigtes Interesse, datenschutzwidrig ist. Google Fonts Einbindungen via fonts.gstatic.com sowie fonts.googleapis.com sollten daher umgehend durch eine lokale Einbindung ersetzt werden.

Die Lösung: Google Fonts lokal auf eigenem Server

Wie kann man nun die Vorteile der Vielfalt der Schriften nutzen, ohne Kompromisse bei der Geschwindigkeit und dem Datenschutz einzugehen? Zum Glück bietet Google die Möglichkeit, die Schriften herunterzuladen und auf dem eigenen Server zu installieren. Die Open-Source-Fonts im Google Fonts-Katalog werden unter Lizenzen veröffentlicht, die es Ihnen ermöglichen, sie auf einer beliebigen Website zu verwenden, sei es geschäftlich oder privat.

Wie kann ich Google Fonts lokal auf meinen Webserver laden?

Genutzte Google Fonts identifizieren

Zunächst einmal müssen Sie überprüfen, welche Google Fonts Sie auf Ihre Website einbinden.

Der erste Test läuft am Besten über die Website Google Fonts Checker.

Zur Sicherheit sollten Sie die verwendeten Fonts Ihrer Website zusätzlich über das Entwickler-Tool in Chrome identifizieren. Im Chrome-Browser klicken Sie einfach mit einem „Rechtsklick“ in eine Seite Ihrer Website. Es öffnet sich an der Stelle ein Pop-up-Menü. Dort wählen Sie „Untersuchen“ (oder je nach Webbrowser „Inspect“ oder „Element untersuchen“ etc.). Es öffnet sich am unteren Rand des Browsers ein Bereich, der für Entwickler vorgesehen ist. Unter dem Punkt „Quellcode“ („Sources“ war in einer früheren Version des Browsers) können Sie nachvollziehen, von welchen Quellen Daten für Ihre Website geladen werden.

Übrigens können Sie auf diese Weise später überprüfen, ob tatsächlich keine Verbindung mehr zum Google Server hergestellt wird.

Google Chrome: „Quellcode“ (ehemals „Sources“) zur Identifizierung von Google Fonts

Google Fonts herunterladen

Zunächst müssen wir die Google Fonts herunterladen. Rufen Sie dazu die Website Google Fonts auf und suchen sich die passende(n) Schritte(en) aus. Klicken Sie auf „SELECT THIS FONT“ oben rechts in der Ecke. Wiederholen Sie die Prozedur, bis Sie sich die gewünschten Schriften zusammengestellt haben.

Um die ausgewählten Schriften herunterladen zu können, klicken Sie rechts unten auf den Bereich „Family Selected“. Die gesammelten Schriften werden nun angezeigt. Zum Download klicken Sie auf das „Download-Icon“ rechts oben im Kästchen der angezeigten Schriften:

Sie erhalten eine gepackte ZIP-Datei, die die gewünscht(en) Schriften im TrueType-Format (.ttf) enthält. Diese können sie so allerdings noch nicht auf Ihrer Website verwenden. Sie müssen die Fonts mit Hilfe von Diensten im Web in Webfonts (Zum Beispiel .woff, .woff2 und .eot) umwandeln. Wir haben gute Erfahrung mit transfonter.org machen können.

Dieser direkte Weg über Google Fonts ist zugegebener Maßen etwas kompliziert. Aber zum Glück gibt es eine Erleichterung namens google-webfonts-helper von Mario Ranftl. Bei diesem Dienst können Sie nicht nur einfach die für Ihre Website passenden Schriftgrößen auswählen, Sie erhalten den passenden CSS-Code und alle benötigten Font-Formate aus einer Hand:

Google Fonts lokal auf den eigenen Server hochladen

Haben Sie alle benötigten Dateien zusammengestellt, laden Sie die Fonts mithilfe Ihrer FTP-Software auf Ihren Server hoch. Am besten platzieren Sie die gewünschten Fonts in einem Unterverzeichnis (zum Beispiel /fonts/)eines eingerichteten Child-Themes:

Google Fonts in Ihrer Website einbinden

In der CSS-Datei des Child-Themes kopieren Sie für alle benötigten Schriften den CSS-Code, den Ihnen zum Beispiel google-webfonts-helper mitgeliefert hat. Zum Beispiel:

/* oswald-regular - latin */
 @font-face {
 font-family: 'Oswald';
 font-style: normal;
 font-weight: 400;
 src: url('fonts/oswald-v16-latin-regular.eot'); /* IE9 Compat Modes */
 src: local('Oswald Regular'), local('Oswald-Regular'),
 url('fonts/oswald-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('fonts/oswald-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
 url('fonts/oswald-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
 url('fonts/oswald-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
 url('fonts/oswald-v16-latin-regular.svg#Oswald') format('svg'); /* Legacy iOS */

Wichtig: Bitte stellen Sie sicher, dass Sie den richtigen Zielpfad für die Schriftartdateien haben, der davon abhängt, wo Sie sie auf Ihrem Server die Fonts hochgeladen haben.

Im nächsten Schritt müssen Sie jetzt in der CSS-Datei Ihres Child-Themes die Schriften den gewünschten Elementen zuordnen. Zum Beispiel:

body {
 font-family: "Oswald"!important;
 }

h1, h2, h3, h4, h5, h6 {
 font-family: "Oswald"!important;
 }

Lösungen mittels Plugin

Ist Ihnen das alles zu figeliensch, dann haben wir für Sie zwei Plugins im Angebot:

Plug-in „Embed Google Fonts“

Bei einigen Website-Projekten setzen wir das Plugin Embed Google Fonts ein. Diese Erweiterung versucht, registrierte Google Fonts aus Themes und Plugins automatisch durch lokale Versionen zu ersetzen, die direkt von Ihrem eigenen Server geladen werden.

Hinweise

• Die erste Anfrage kann langsam sein, da die Schriftarten bei der ersten Anfrage heruntergeladen und zwischengespeichert werden.
• Es werden nicht immer alle Ihre Google-Schriftarten durch lokale Versionen ersetzt. Wenn ein Plugin/Theme nicht WordPress wp_enqueue_style verwendet, wird es wahrscheinlich nicht funktionieren.
• Geladene Fonts sind nicht optimiert, d.h. es wird die gesamte Schriftart inklusive aller Untergruppen geladen

Plug-in „Local Google Fonts“

Das Plug-in Local Google Fonts versucht die von Google Servern eingebundenen Schriften zu erkennen (für Techniker: das funktioniert zurzeit nur, wenn die Fonts über wp_enqueue_style eingebunden sind und nicht via @import.). Die erkannten Schriften können dann entweder manuell oder automaitsch heruntergeldan werden.

Wichtige Hinweise: Die Fonts werden erst erkannt, wenn sie genutzt wurden. Deswegen sollten Sie nach der Installation des Plug-in zunächst die Website aufrufen und ein paar Seiten anklicken. Und: Denken Sie bitte daran, dass eine Lösung mittels Plug-in nur die zweitbeste Lösung sein kann: Funktioniert das Plug-in zum Beispiel nach einem fehlgeschlagenen Update nicht mehr, dann werden die Fonts wieder von Google Servern geladen.

Verbindung zu Google kappen und Abschlusstest

Da viele Themes heutzutage Google Fonts direkt zur Verfügung stellen, müssen Sie sicherstellen, dass die Fonts nicht trotz Ihrer ganzen Mühen weiterhin geladen werden. Setzen Sie sich mit Ihrem Theme-Entwickler in Verbindung und fragen, wie Sie die Google Fonts deaktivieren können.

Bei dem Theme Enfold* zum Beispiel tragen Sie den folgenden Code in die functions.php des Child Themes:

/* Google Fonts deaktivieren */
add_action( 'init', 'enfold_customization_switch_fonts' );
function enfold_customization_switch_fonts() {
	global $avia;
	$avia->style->print_extra_output = false;
}

Sie können aber auch das Plug-in Remove Google Fonts References installieren. Die Erweiterung muss lediglich installiert und aktiviert werden – eine Konfiguration ist nicht notwendig. Anschließend löschen Sie ggf. Ihren „Cache„, laden Ihre Website neu und prüfen, ob die Schriften noch wie gewünscht geladen und dargestellt werden.

Zum Schluss können Sie noch mal die Chromes Entwickler-Tools bemühen, um sicherzustellen, dass Ihre Website tatsächlich nicht mehr zu den Google-Servern funkt. Wenn anstatt der zuvor noch angezeigten Verbindungen zum Google Server (fonts.googleapis.com, fonts.static.com) nun die lokalen Schriften aufgeführt werden, habt Sie die Schriften erfolgreich eingebunden.

Sonderfall: Google Maps

Sollten Sie Google Maps verwenden, dann wird Ihnen der Abschlusstest eine Enttäuschung bereiten: Google lädt nämlich die Schrift Roboto von seinen Servern. Zum Glück haben wir eine Anleitung gefunden, die auch dieses Problem löst:

1. Erstellen Sie eine Datei /js/norobotofontbymaps.js in dem Verzeichnis Ihres Child Themes.
2. Kopieren Sie diesen Code in die Datei norobotofontbymaps.js:
   var head = document.getElementsByTagName('head')[0];// Save the original method
var insertBefore = head.insertBefore;
// Replace it!
head.insertBefore = function (newElement, referenceElement) {
if (newElement.href && newElement.href.indexOf('//fonts.googleapis.com/css?family=Roboto') > -1) {
console.info('Prevented Roboto from loading!');
return;
}
insertBefore.call(head, newElement, referenceElement);
};
3. Fügen Sie den folgenden Code zu Ihrer Functions.php des Child Themes:
   /*prevent roboto fonts loaded by google maps api*/
$child_theme_url = get_stylesheet_directory_uri();
wp_register_script( 'norobotofontbymaps', $child_theme_url.'/js/norobotofontbymaps.js', 'jquery', "1", true);
wp_enqueue_script( 'norobotofontbymaps' );

Anmerkung: *) ist ein „Partnerlink“. Wenn Sie auf den Link klicken und einen Artikel kaufen, erhalten wir eine Provision. Auf Ihren Kaufpreis hat es keine Auswirkung. Vielen Dank für Ihre Unterstützung!