3.8
(39)

So bindest du Google Fonts lokal ein: DSGVO-konform mit WordPress

Google Fonts lokal einbinden? Das macht richtig viel Sinn! Denn nachdem die Datenschutz-Grundverordnung (DSGVO) schon eine Weile (25. Mai 2018) gültig ist, hat kein Webdesigner (oder Agentur) eine Ausrede mehr, die Google Fonts nicht datenschutzkonform in die eigene Website einzubinden.

⚠️ Update Januar 2022

Das LG München hat am 20.01.2022 in einem Urteil festgestellt, dass eine Einbindung von Schriften über Google-Server nicht datenschutzkonform ist. Daher solltest du die Fonts lieber lokal einbinden oder auf Systemfonts umsteigen.

Und ja: die Datenschutz-Grundverordnung hat uns Webdesigner fest im Griff. Man kann es hassen oder man kann es lieben – klar ist nur wir haben uns alle dran zu halten. Denn sollte es zu einer Abmahnung kommen, gilt der folgende Spruch garantiert nicht:

»Ich hab das alles gar nicht gewußt«

Aber ich möchte in diesem Artikel nicht über Sinn oder Unsinn der DSGVO diskutieren. Fakt ist, dass Google Fonts (wenn es über den Google Server eingebunden ist) theoretisch Daten eurer Besuche abgreifen kann. Das ist nicht DSGVO-konform!

Deshalb musst du hier aktiv werden und deine Google Fonts lokal einbinden. Das bedeutet, die Schriften deiner Webseite werden nicht mehr über den Google Server geladen, sondern du lädst die Schriftarten auf deine eigene Website hoch und dadurch werden die Schriften lokal geladen. Damit sieht Google nicht mehr die Nutzerdaten.

Google Fonts lokal einbinden – so geht’s

In dieser Schritt-für-Schritt-Anleitung werde ich dir zeigen, wie du deine Google Fonts herausfindest, lokal einbindest und das externe Laden der Google Schriftarten deaktivierst.

Leider ist hier jedes WordPress-Theme anders. Das bedeutet, unsere Anleitung kann nicht 100 % aller Fälle abdecken. Dennoch werde ich versuchen sie so universell zu schreiben, dass du auch mit deinem WordPress-Theme Google Fonts lokal einbinden kannst.

Benutzte Google Fonts herausfinden

Im ersten Schritt müssen wir natürlich wissen, welche Google Fonts wir ersetzen wollen. Deshalb müssen wir die genutzten Google Fonts identifizieren.

Falls du nicht weißt, welche Google Fonts du benutzt, gibt es mehrere Möglichkeiten, das herauszufinden. Das liegt daran, dass Google Fonts unterschiedlich eingebunden werden können.

Falls du ein extra Plugin benutzt und Google Fonts einzubinden, findest du die Schriftarten natürlich in den Einstellungen des jeweiligen Plugins. Meistens jedoch werden Schriften über ein Theme eingebunden. Hier findest du die eingebunden in Schriften in den Einstellungen des Themes oder über den Customizer (Design → Customizer → Fonts).

Google Fonts in den Theme-Optionen finden

Willst du deine Schriftarten über dein WordPress-Theme eingebunden hast, hängt es davon ab, welches Theme du benutzt. Ich kann hier keine Anleitung für alle WordPress-Theme schreiben, da es von Theme zu Theme unterschiedlich ist, wo die Entwickler die Schriftart Einstellungen platziert haben.

Bei den meisten Themes sollte es sich jedoch ein folgenden drei Orten finden:

  • irgendwo unter Design, Typography oder Einstellungen
  • in einem eigenen Menüpunkt
  • unter Design → Customizer

Falls du ein Page Builder Plugin (wie Elementor) benutzt, kann es auch sein, dass die Schriften an mehreren Orten hinterlegt sind. Achte immer darauf alle Einstellungen zu überprüfen.

Sobald du die jeweiligen Google Fonts gefunden hast, solltest du dir notieren, welche Schriftarten und Schriftschnitte du benutzt.

Google Fonts in einem Plugin finden

Vielleicht hast du deine Google Fonts aber auch über ein Plugin eingebunden. Manchmal passiert das sogar über Plugins, die etwas völlig anderes tun. Das ist natürlich ein schlechter Stil von Entwicklern – bedeutet aber für dich, dass du (wenn du fertig bist) dein Ergebnis auf jeden Fall überprüfen solltest. Damit wirklich keine Google Fonts mehr geladen werden.

Falls du nicht mehr weißt, ob du Google Schriften über ein Plugin eingebunden hast, schau doch einfach mal durch deine Plugin Liste und überprüfe, ob eins der folgenden Plugins dabei ist:

Du findest dann die jeweils eingesetzte Schriftart in den Einstellungen des Plugins.

Falls du Google Maps oder andere Google Dienste eingesetzt werden externe Schriftart eingeladen. Hier ist es meist nur sehr schwer möglich diese zu deaktivieren. Deshalb solltest du diese Skripte und iFrames komplett aus deiner Webseite entfernen.

 

Google Fonts über die Entwicklerkonsole finden

Königsweg (hier wirst du alle Schriftarten finden) ist über die Entwicklerkonsole. Dies hat den Vorteil, dass du hier keine Schriftarten übersehen kannst, da in der Entwicklerkonsole gezeigt wird, welche Google Fonts geladen werden.

Um die Entwicklerkonsole aufzurufen, klickst du auf deiner eigenen Website die rechte Maustaste und wählst dann “Element untersuchen”. Übrigens gibt es die Entwicklerkonsole in Chrome sowie auch in Firefox.

Für Chrome: Klicke den Tab Network. Aktualisiere nun deine Website, damit du siehst, was alles geladen wird. In der oberen Leiste aktivierst du den Filter “Fonts”. Nun zeigt dir Chrome alle Schriftarten an, die geladen werden.

Sobald du hier auf eine Schriftart klickst, siehst du den Pfad, aus welchem diese Schriftart geladen wird.

In meinem Beispiel habe ich die Fonts bereits lokal eingebunden und die Schriftart wird über meine Domain geladen.

Benötigte Google Fonts herunterladen

Nachdem du nun weißt, welche Google Fonts du benutzt, solltest du diese herunterladen, um die Google Fonts lokal auf deinem Web Server einzubinden.

Natürlich kannst du alle Google Fonts auch bei Google herunterladen. Allerdings benötigst du für die lokale Einbindung der Google Fonts bestimmte Dateitypen.

Hierfür gibt das tolle kleine Tool Google Webfonts Helper von Mario Ranftl, welches automatisch die benötigten Dateitypen für die jeweiligen Google Fonts zur Verfügung stellt:

https://google-webfonts-helper.herokuapp.com/fonts

Und deine benötigte Schrift herunterzuladen, gibst du einfach in das Suchfeld (oben links in der Ecke) die gewünschte Schrift ein. Danach wählst du die jeweiligen Zeichensätze und Schriftschnitte aus.

Unter dem Punkt 3 solltest du noch den Dateipfad angeben, indem du die Schriften später auf deinen Server laden solltest. Das kleine Tool wird die CSS Datei dahingehend anpassen.

Im vierten Schritt lädst du dir die Dateien herunter.

Solltest du mehrere Schriftarten auf deiner Website nutzen, kannst du die hier beschriebenen Schritte natürlich beliebig oft wiederholen. Das Google Webfonts Helper Tool wird dir immer gute Dienste leisten :)

Google Fonts auf deinen Server hochladen

Nachdem du dir nun die Schriftarten heruntergeladen hast, wirst du eine ZIP-Datei auf deinem Computer finden. Diese enthält neben der CSS-Datei zahlreiche Formate deiner Schrift (EOT, SVG, WOFF, WOFF2, TTF).

Die Formate solltest du auf deinen eigenen Server hochladen. Dafür nutzt du ein FTP Programm, um dich mit deinem Webspace zu verbinden. Achte hier darauf, dass du die Schriften in das vorher definierte Verzeichnis hochlädst.

CSS auf deiner Website anpassen

Du hast es fast geschafft. Nachdem du die Google Schriften auf deinem eigenen Server abgelegt hast, solltest du die Schriftarten noch in deine eigene CSS einbinden. Dafür hat dir das Google Webfonts Helper Tool bereits den nötigen CSS Code geliefert.

Binde diesen Code einfach in die style.css-Datei ein. Achte jedoch darauf, dass du ein Child-Theme verwendest, damit die notwendigen Änderungen auch nach dem Update deines WordPress-Themes noch bestehen bleiben.

Falls du noch kein Child-Theme verwendest, solltest du das unbedingt nachholen!!!

Verbindung zu Google Fonts deaktivieren

Nun musst du noch die Verbindung zum Google Server trennen, da wir ja die Schriften lokal eingebunden haben.

Falls du deine Schriften über ein Plugin (z.B. Easy Google Fonts) eingebunden hattest, reicht es dieses zu deaktivieren. Falls du die Google Fonts jedoch über ein WordPress-Theme eingebunden hast, versuche die Schrift-Optionen im Theme zu löschen.

Mit Plugins

Alternativ gibt es natürlich auch Plugins, die die Verbindung zu Google kappen. Und das Ganze per Knopfdruck.

Hier gibt es verschiedene Plugins, das externe Laden von Google Schriften deaktivieren können. Falls du bereits Autoptimize nutzt (gutes Plugin, um Ladezeiten zu optimieren), kannst du damit auch Google Fonts entfernen:

Einstellungen → Autoptimize → Extras → Google Fonts entfernen

Solltest du Perfmatters nutzen, findest du auch in diesem Plugin Einstellungen, um Google Fonts zu deaktivieren:

Unter General → Optionen → Fonts findest du den Punkt “Disable Google Fonts”

Solltest du keines der oben genannten Plugins verwenden, kannst du ein Plugin installieren. Dazu nutzt du einfach eines der folgenden Plugins:

Installiere das Plugin und aktiviere es – eine Konfiguration ist nicht notwendig.

Mit Snippet

Falls die oben genannten Plugins dir nicht helfen konnten, kannst du auch ein Code Snippet in die functions.php deines Child-Themes integrieren:

function removeGoogleFonts(){
global $wp_styles;
$regex = '/fonts\.googleapis\.com\/css\?family/i';
foreach($wp_styles->registered as $registered) {
if( preg_match($regex, $registered->src) ) {
wp_dequeue_style($registered->handle);
}
}
}
add_action('wp_enqueue_scripts', 'removeGoogleFonts', 999);

Das sollte bei vielen Themes funktionieren. Getestet ist das mit folgenden Themes: Divi Theme, Herald, Brooklyn, Betheme und dem WordPress Standard Theme.

Prüfe, ob alle Google Fonts lokal geladen werden

Du hast es fast geschafft! Im letzten Schritt solltest du noch überprüfen, ob wirklich alle Google Fonts lokal eingebunden sind. Dafür öffnest du die Entwicklerkonsole deines Browsers und schaust unter “Sources” mit dem Filter “Fonts”, von wo die Google Schriften geladen werden.

Achte darauf auch den Cache zu löschen, damit deine Website auch den aktuellen CSS Code verwendet.

Google Fonts lokal einbinden Fazit

Durch die DSGVO du als Webmaster gewissermaßen dazu gezwungen, Google Fonts lokal einzubinden. Daraus ergeben sich jedoch auch gewisse Nachteile:

  • Serverlast wird größer
  • Ladezeit wird ev. größer
  • eventuell muss ein zusätzliches Plugin installiert werden

Einige Webmaster haben sich aufgrund von Ladezeitoptimierung sowie der DSGVO dazu entschlossen, Standard-Systemschriften zu benutzen.

Ich persönlich halte davon nicht viel. Ein Webdesign lebt von der Typografie. Hier auf Standard-Systemschriften zu setzen, finde ich ästhetisch sehr fragwürdig.

Klar geht es auch immer um Ladezeit und damit auch und das Nutzererlebnis – allerdings sollte sich das Look-and-Feel deiner Website auch gut anfühlen.

Standardschriften wie Arial finde ich persönlich hässlich. Schließlich war es ein langer Weg zu den Webfonts.

Früher gab es eben nur Arial und Verdana als Schriftart für das Web. Heute bieten sich den Webdesigner hier viel größere Möglichkeiten. Auch Google hat mit seiner Schriftart Bibliothek dazu beigetragen, das Web typografischer zu machen.

Als Webdesigner solltest du diese Möglichkeit nutzen.

Das könnte dich auch interessieren…

Rafael Luge
Rafael Luge
Intermedialer Designer (MA) & Gründer von Kopf & Stift Meine Leidenschaft sind Design und Wordpress. Und erfolgreiche Websites. Auf meinem Blog gebe ich dir Tipps, wie auch du deine Website erfolgreicher machst.

Hat dir mein Beitrag geholfen?

3.8 / 5. 39

Bisher keine Bewertungen! Sei der Erste, der diesen Beitrag bewertet.

14 Antworten
  1. 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: https://happyworx.de/google-fonts-checker

    Danke für den Beitrag, weiter so :D

  2. Danke Rafael, super Beitrag.

    Ich wollte auf einen Fehler hinweisen, den du auch selbst in deinem Beitrag bereits bemerkst. Du lädst in deinem Beitrag alle Formate der Schriften hoch, inklusive der ttf und eot-Formate. Das macht die Website natürlich super langsam und ist auch nicht ganz die korrekte Verwendung bezüglich der Open Font Lizenz.

    Du darfst die ttf und eot-Dateien der Google Fonts gar nicht so großzügig mit deiner Website um die Welt verteilen, ohne ganz spezifische Regeln einzuhalten.

    Ohne jetzt weiter darauf einzugehen, man darf rein Lizenztechnisch nur das WOFF und das WOFF2 Format verwenden und die können die Website jetzt sogar noch zu beschleunigen, denn diese Formate sind explizit auf Geschwindigkeit optimiert, vor allem das WOFF2-Format

    Wenn man nur die beiden Formate benutzt, kann die Seite sogar schneller sein, als wenn man die Google Fonts extern lädt. Als Beispiel mal die Seite hier, wo 500 Google Fonts auf einmal geladen werden: https://lokalefonts.de/

    Einen Mini-Rucker gibt es vielleicht, aber im Grunde lädt es super schnell und das sind alles lokale Fonts.

    Lieber Gruß,
    Pascal

  3. Hallo,

    ich habe alle die Schritte nachvollzogen und durchgeführt. Leider werden dei Schriften nicht gefunden. In der Konsole sehe ich bei allem eingefügten Schriften die Fehlermeldung: Failed to load resource, error 404. Als Pfad habe ich verwendet:/Papiermuehle_neu/wp-content/themes/himalayas-pro/font-awesome/fonts

    In der Css schaut es folgendermaßen aus:
    /* lato-100 – latin-ext_latin */
    @font-face {
    font-family: ‘Lato’;
    font-style: normal;
    font-weight: 100;
    src: url(‘/Papiermuehle_neu/wp-content/themes/himalayas-pro/font-awesome/fontslato-v23-latin-ext_latin-100.eot’); /* IE9 Compat Modes */
    src: local(”),
    url(‘/Papiermuehle_neu/wp-content/themes/himalayas-pro/font-awesome/fontslato-v23-latin-ext_latin-100.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
    url(‘/Papiermuehle_neu/wp-content/themes/himalayas-pro/font-awesome/fontslato-v23-latin-ext_latin-100.woff2’) format(‘woff2’), /* Super Modern Browsers */
    url(‘/Papiermuehle_neu/wp-content/themes/himalayas-pro/font-awesome/fontslato-v23-latin-ext_latin-100.woff’) format(‘woff’), /* Modern Browsers */
    url(‘/Papiermuehle_neu/wp-content/themes/himalayas-pro/font-awesome/fontslato-v23-latin-ext_latin-100.ttf’) format(‘truetype’), /* Safari, Android, iOS */
    url(‘/Papiermuehle_neu/wp-content/themes/himalayas-pro/font-awesome/fontslato-v23-latin-ext_latin-100.svg#Lato’) format(‘svg’); /* Legacy iOS */
    }

    Wo liegt mein Fehler. ich weiß gerade nicht weiter. Google Webfont ist deaktiviert per Optimizer.

    M.f.G.
    Christoph Fincke

  4. Lieber Rafael, vielen Dank für die ausführlichen Erklärungen.
    Bei mir hat das Snippet mit dem DIVI-Child immer nur kilometerlange Fehlermeldungen bewirkt. Und wenn ich stattdessen das Plugin “Disable and Remove Google Fonts” einsetze, weil sich die anderen Optimizer mit diversen anderen Plugins nicht vertragen, kommt bei meinem Check eine Fehlermeldung. Status 404 bei Methode GET, Host Meine webseite. Kannst du mir bitte einen Tip geben, was das nun bedeutet? Irgendwas ist wohl falsch, und was mache ich jetzt?
    Vielen Dank schon jetzt.
    Cornelia

  5. Ungelogen einer der besten Beiträge, was Hilfeleistungen für dieses Thema angeht! Super erklärt und hat sofort funktioniert mit dem zusätzlichen Code Snippet für die Kappung von Google Fonts!

    1. Ich empfehle den “Easy Google Fonts”, den von borlabs kenne ich nicht, aber Easy Google Fonts lädt die Fonts sofort runter und man muss sonst nichts ändern :-)
      (Imports schafft es nicht, aber man hat jetzt die URL zu einer lokalen Version einer _font.css und kann einfach die Online-Version mit der Offline-Version swappen.

  6. Hallo Rafael,

    fürs erste schon. Nur, wenn ich jetzt so ein plugin einbinde oder Code Snippet einfüge, funktioniert das dann auch bei Google maps?

    Wir haben gerade deswegen eine Strafanzeige erhalten

    )örg

  7. Danke! Der letzte Punkt “Verbindung zu Google kappen” und die Empfehlung eines konkreten Plugins hat mir jetzt ganz großartig weitergeholfen, nachdem ich den ganzen Nachmittag nach einer brauchbaren Anleitung gesucht hatte. Klarer, gut erklärter, enorm hilfreicher Artikel!

Schreibe einen Kommentar

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

WordPress Cookie Plugin von Real Cookie Banner