Tipps

Google Fonts auf eigenem Webserver in WordPress einbinden

DSGVO: Google Fonts lokal in WordPress einbinden

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 einfachste Weg ist es, die verwendeten Fonts Ihrer Website über das Entwickler-Tool in Chrome herausfinden. 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 "Source" zur Identifizierung von Google Fonts

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.

Schritt 1 - Google Webfont auswählen
Schritt 1 – Google Webfont auswählen

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:

Schritt 2 - Google Fonts herunterladen
Schritt 2 – Google Fonts herunterladen

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:

Alternativer Schritt 2 - Google Fonts herunterladen
Alternativer Schritt 2 – Google Fonts herunterladen

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 per FTP auf den Webserver hochladen
Google Fonts per FTP auf den Webserver hochladen

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!

turned_in_notBenutzerfreundlichkeit, DSGVO, Geschwindigkeit, Google

23 Kommentare. Wir freuen uns über Ihren Kommentar

  • Felix Martins
    9. November 2022 10:02

    Ich finde es komisch, dass Unternehmen sich beschweren und dabei aber oftmals Google Analytics ohne Einwilligung verwenden. Die Hälfte der Cookie-Banner funktioniert auch nur pseudomäßig.

    Ich habe meine Seiten alle mit einem Google Font Checker geprüft und dann richtig eingebunden. Problem gelöst!
    Google-Fonts-Checker: …

    Danke für den Beitrag, weiter so :D

    Antworten
  • Hallo Thorsten, danke sehr für die tolle Beschreibung.
    sehr hilfreich.

    Ich erstelle auch Webseiten mit WordPress meistens mit Hilfe von Divi und hoste Sie normalerweise auf Kundenserver.

    Abgesehen davon, Google bietet auch eine Business-suite bzw. die Möglichkeit eine Webseite inkl. Domains gegen Zahlung zu erstellen.
    Wo liegen in diesem Fall die Fonts wenn man als Webserver Google hat?

    Darf die Webseite in Deutschland nicht eingeblendet werden?

    Ich finde persönlich die Anbindung der Google-Fonts als Persönlichkeit Verletzung einzustufen so ein Schwachsinn und nur als Futter für Rechtsanwälte.
    Letzte Woche habe ich eine Abmahnung bekommen, weil ich auf einer meiner Webseite vergessen hatte die Schriften lokal zu speichern und anzubinden. Und Swupp schon habe ich eine Abmahnung bekommen. Ich zahle vorerst die 170 Euro nicht. Das was ein Brief das per Infopost versendet wurde. Nicht mal eine Briefmarke darauf… sehr lustig. Mal schauen was passiert.

    Wieso die Zustimmung einholen wie bei den Cookies-Einbinden und dann erklären, dass die Schriften bei google in USA liegen. Wenn die Besucher dann nicht einverstanden sind, sollen sie einfach die Webseite nicht besuchen.
    Bei youtube und vimeo wurde bekanntlich auch anderes gelöst.

    Sergio

    Antworten
    • Moin Sergio,

      leider kann ich Dir nicht beantworten, in welchem Land Google die Websites hostet. Es ist aber sicher besser davon auszugehen, dass die Server in den USA stehen und entsprechen aktuell im Konflikt mit der DSGVO stehen.

      Ahoi!
      Thorsten

      Antworten
  • Ich verstehe nicht, weshalb es jetzt so ein Thema ist, immerhin müssen die Schriften eigentlich seit Mai 2018 lokal eingebunden werden, oder nicht?

    Wenn ich noch ein Tool empfehlen darf, dann dieses: https://hanetzok-medien.de/google-fonts-checker/

    Damit lässt sich die Website prüfen, aber mit der Besonderheit, dass die keine Daten speichern.

    Antworten
  • Danke Thorsten,
    Funktioniert. Was Ben dazu sagt: nicht halb so wild – sogar in Österreich geht momentan eine Abmahnung rund. Doch so wild… Schon 2 meiner Kunden haben eine Abmahnung (von der gleiche Kanzlei) bekommen.
    Es steht zwar noch nicht fest, ob der Rechtsanspruch gesichert ist und sie scheint eher gegen ‚Treu und Glauben‘ zu sein, aber ich gehe lieber auf Nummer sicher.
    Danke für deinen Beitrag!

    Antworten
  • Halb so wild, wenn man seinen Sitz nicht im Bezirk des LG München hat. Spannend, was andere Gerichte oder der BGH dazu sagen würden.
    Hat übrigens nix mit DSGVO zu tun. Laut LG München ist das unautorisierte Weiterleiten der IP eine Persönlichkeitsrechzsverletzung nach § 823 BGB.

    Antworten
    • Moin Ben,

      vielen Dank für Deinen interessanten Einwurf. Bisher wurde kolportiert, dass der Schadensersatzanspruch für den Besucher in Höhe von 100 Euro vom LG München aus Artikel 82 der DSGVO abgeleitet wurde, der jeder Person zusteht, „der wegen eines Verstoßes gegen diese Verordnung ein materieller oder immaterieller Schaden entstanden ist“.

      Ahoi!
      Thorsten

      Antworten
  • An die woff-Datei zu kommen geht auch einfacher!
    Wie im ersten Bild zu sehen hat @fonts-face src eine URL, diese in die Adresszeile des Browsers kopieren und aufrufen. Die woff-Datei wird heruntergeladen.

    Antworten
  • Google Fonts verstößt also gegen Datenschutzrecht weil die IP-Adresse ungefragt übergeben wird! Was ist denn mit
    da landet die IP auch ungefragt bei Google und auch
    oder bei einem Cookiebot https://consent.cookiebot.com/uc.js wird die IP übergeben!?

    Schöne DSGVO – am Besten Internet abschaffen ;-)

    Antworten
  • Sind alle Schriften von Google Open Source oder wo finde ich die Schriften, die Open Source sind?

    Antworten
  • Hallo Thorsten, danke für die wirklich „idiotensichere“ Anleitung. Leider klappt es bei mir trotzdem nicht :(
    Ich habe alles so gemacht wie beschrieben (mit alternativem Schritt 2). Den Ordner mit den Fonts habe ich zunächst in den Child-Theme Ordner gelegt und den Pfad entsprechend angepasst. Nachdem das nicht funktionierte, hab ich ihn ins Stammverzeichnis verschoben und den Pfad auf url(‚fonts/…) geändert – funktioniert auch nicht. Es werden nur Sytemschriftarten geladen.
    Woran könnte das liegen? ich habe das Theme Enfold, Nr. 5 habe ich durchgeführt – das funktioniert.
    Danke für einen Tipp!
    Ciao

    Antworten
  • Hallo Thorsten,
    gibt es nicht auch Gründe, die dafür sprechen, Fonts extern einzubinden? Könntest Du diese vielleicht noch einmal kurz ansprechen?
    Vielen Dank dafür!

    Antworten
    • Moin Michael,
      ad hoc fallen mir da nicht wirklich gute Gründe ein. Google Fonts ist seit langem eine sehr schöner Weg, Websites eine individuelle Typografie zu spendieren.
      In Zeiten von DSGVO ist es aber nun ratsam, die Fonts herunterzuladen und auf dem eigenen Server zu installieren.
      Ahoi!
      Thorsten

      Antworten
  • Karsten Schmidt
    3. Juli 2018 17:19

    Moin, Danke für diese Anleitung! Bei mir wird jetzt aber die Schrift ganz zum Schluss geladen und das sieht etwas seltsam aus. Hättest Du eine Erklärung, was ich da falsch mache? Vielen Dank!

    Antworten
    • Moin Karsten,
      das kann damit zusammenhängen, wo und wie Du den CSS-Code eingefügt hast. Die Möglichkeiten sind von Theme zu Theme verschieden. Grundsätzlich sollten die Schriften möglichst vorn im zu ladenden CSS-Code stehen.
      Ein weiterer Faktor könnte aber auch ein langsamer Server sein, der sich nun beim trägen Laden des CSS-Codes bemerkbar macht.
      Ahoi!
      Thorsten

      Antworten
  • Das Plug-in „Disable Google Fonts“ funktioniert seit WordPress Version 4.6 nur noch bei einigen WordPress Standardthemes.

    Antworten
  • Hi.
    Wie stelle ich denn fest, welche Google fonts denn überhaupt geladen werden?

    Antworten
    • Moin Markus,
      wähle mit Hilfe des Chrome-Browsers per Rechtsklick „Untersuchen“. “Untersuchen“. Es öffnet sich am unteren Rand des Browsers ein Bereich, der für Entwickler vorgesehen ist. Unter dem Punkt „Sources“ kannst Du nachvollziehen, von welchen Quellen Daten für Deine Website geladen werden.
      Ahoi!
      Thorsten

      Antworten
  • Hallo, das funktioniert bestens. Aber ist es auch rechtlich zulässig?

    Antworten

Wir freuen uns über Ihren Kommentar!

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Fill out this field
Fill out this field
Bitte geben Sie eine gültige E-Mail-Adresse ein.
You need to agree with the terms to proceed

expand_less
Elbnetz GmbH hat 4,96 von 5 Sternen 50 Bewertungen auf ProvenExpert.com