Du möchtest mehr Leser für deinen Blog und mehr Kunden für dein Online-Business?

Dann abonniere unseren kostenlosen Newsletter mit exklusiven Tipps und Angeboten rund um's Bloggen, SEO und Online-Business. Als Willkommensbonus erhältst du unser E-Book Die 12 Gesetze unglaublich erfolgreicher Blogartikel.

Abmeldung jederzeit möglich. Etwa 2 bis 5 E-Mails im Monat. Die Einwilligung umfasst die Hinweise zu Widerruf, Versanddienstleister und Statistik gemäß unserer Datenschutzerklärung.

Die 12 Gesetze unglaublich erfolgreicher Blogartikel

Wie du Google Fonts lokal und DSGVO-konform in WordPress einbindest (und welche Nachteile das hat)

Wenn du Google Fonts standardmäßig eingebunden hast, das heißt über Google-Server, werden mitunter Daten wie die IP-Adresse, Client-Daten (benutzter Browser, Betriebssystem) oder Referrer (die verweisende Seite) von Google gespeichert.

Laut eigenen Angaben werden durch Google Fonts zwar keine Cookies gespeichert und die Daten nicht mit Google-Konten in Verbindung gebracht. Aber da Google Fonts auf bestimmt jeder zweiten Website eingebunden sind, ist es durchaus möglich, dass Google Nutzeraktivitäten dadurch im Netz nachverfolgen kann. Das kann im Rahmen der DSGVO ein rechtliches Risiko darstellen.

Wie du Google Fonts in WordPress lokal einbindest, also von deinem eigenen Server anstatt von Google-Servern lädt, möchte ich dir in diesem Artikel Schritt für Schritt zeigen.

Achtung: Dieser Blogbeitrag ist keine Rechtsberatung! Im Rahmen meiner Arbeit als Blogger und WordPress-Dienstleister habe ich mich zwar intensiv mit den geltenden Datenschutzbestimmungen und der DSGVO beschäftigt, ich bin jedoch weder Jurist noch Datenschutz-Experte. Dementsprechend kann ich für die Vollständigkeit, Aktualität und Richtigkeit der von mir bereitgestellten Inhalte keine Haftung übernehmen.

Nachteile davon, Google Fonts lokal einzubinden

Google Fonts über deinen eigenen Server hat jedoch auch einige Nachteile, auf die ich auch kurz eingehen möchte:

  1. Größere Belastung deines eigenen Servers
  2. Auftreten von Flash of Unstyled Text (sofern du kein Critical CSS verwendest)
  3. Zeitaufwand oder Mehrkosten (z. B. bei Zurückgreifen auf einen Dienstleister) durch lokales Einbinden
  4. ggf. Installation eines zusätzlichen Plugins

Wenn du mich fragst, lässt sich das berechtigte Interesse (nach Art. 6 Abs. 1 lit. f DSGVO) daran, Google Fonts von Google zu beziehen, in vielen Fällen gut begründen. Ich halte es deshalb nicht unbedingt für nötig, Google Fonts lokal einzubinden.

1. Herausfinden, welche Google Fonts du nutzt

Damit du Google Fonts lokal einbinden kannst, ist es zunächst notwendig herauszufinden, welche Google Fonts überhaupt auf deiner Website verwendet werden.

1.1 Theme-Optionen

Der erste Anhaltspunkt dafür sind die Theme-Optionen. Diese findest du im WordPress-Adminbereich wahrscheinlich an einem dieser Orte:

  • in einem eigenen Menüpunkt
  • in einem Unterpunkt von Design oder Einstellungen
  • unter Design > Customizer

Dort angekommen suchst du nach einem Unterpunkt wie Typografie, Typography, Fonts oder Schriftarten. So sieht das z. B. bei meinem Theme GeneratePress aus:

Google Fonts im Customizer einstellen

Hast du die entsprechenden Fonts gefunden, öffnest du einen Text-Editor und schreibst dir auf, welche Google Fonts genau verwenden werden und in welcher Stärke (100, 200, 300, 400, 500, 600, 700, 800, 900, normal, bold etc.).

1.2 Plugins oder externer Code

In manchen Fällen werden Google Fonts auch freiwillig oder unfreiwillig über Plugins oder externen Code eingebunden. Das ist zum Beispiel der Fall bei:

Bei Google Maps, reCAPTCHA und anderen externen Ressourcen, die über iframes geladen werden, bleibt dir oft nichts anderes übrig als diese komplett zu entfernen, um zu verhindern, dass Google Fonts auf deiner Website geladen werden.

1.3 Entwickler-Konsole

Zu guter Letzt solltest du in der Entwickler-Konsole in deinem Browser nachschauen, welche Google Fonts geladen werden. Dazu klickst du auf deiner eigenen Website auf die rechte Maustaste und dann auch Element untersuchen.

Nun sollte sich auf der rechten Seite oder unten die Konsole geöffnet haben. Dort klickst du auf den Tab Sources. Jetzt kannst du alle Quellen sehen, die deine Website nutzt, um Ressourcen zu laden.

Google Fonts verbergen sich unter folgenden Punkten:

  • fonts.googleapis.com
  • fonts.gstatic.com

In diesem Beispiel werden die Google Fonts Rufina und Source Sans Pro verwendet (gebündelt in einer einzigen Serverabfrage). Auf der rechten Seite kann man sehen, welche Schriftstärken und Zeichenkodierungen genau verwendet werden:

Google Fonts in der Entwicklerkonsole

2. Mach es dir einfach!

Bei manchen Themes kann man in den Theme-Optionen einstellen, dass Google Fonts lokal geladen werden sollen (oder kann sich andere Schritte dieser Anleitung sparen).

Das ist zum Beispiel der Fall bei:

  • Avada (unter Avada > Theme Options > Advanced > Privacy > Google Fonts Mode kann man direkt einstellen, dass Google Fonts lokal geladen werden sollen)
  • Divi (bietet eine Option, um eigene Schriftarten zu nutzen)
  • Enfold (bietet eine Option, um eigene Schriftarten zu nutzen)
  • Themes von ThemeZee (siehe Blogpost zu DSGVO-Updates)

Schau unbedingt auch in den Changelog deines Themes! Einige Entwickler haben im Rahmen der DSGVO Anpassungen an Ihren Themes vorgenommen und Updates herausgebracht.

2.1 System-Fonts oder Web Safe Fonts nutzen

Auf vielen meiner Websites, darunter auch Blogmojo, habe ich mich dazu entschieden, Google Fonts durch System-Schriftarten (insbesondere die Apple-Schriftart San Francisco finde ich sehr schick!) oder Web Safe Fonts (wie z. B. Arial) zu ersetzen.

Das erspart nicht nur Arbeit, sondern sorgt auch für eine bessere Ladezeit (und einen schöneren Seitenaufbau). Was das Design betrifft, ist das allerdings nicht immer sinnvoll.

Serifenlose Schriften, wie z. B. Open Sans oder Roboto, lassen sich meines Erachtens sehr gut dadurch ersetzen. Bei Serifen-Schriften würde ich davon absehen. Times New Roman und Georgia z. B. sind schreckliche Schriftarten, die nicht ins Web gehören.

3. Schriftarten herunterladen

Wenn du herausgefunden hast, welche Google Fonts du brauchst, musst du diese herunterladen.

Am einfachsten geht das über den Google Webfonts Helper, der dir gleichzeitig den CSS-Code mitliefert, den du in Schritt 4 brauchst:

Google Webfonts Helper

Zuerst wählst du auf der linken Seite den entsprechenden Font aus. Anschließend musst du diesen noch konfigurieren.

  1. Bei select charsets (Charset = Zeichenkodierung) kannst du alles so lassen, wie es ist. Es sei denn dein Blog ist auf Griechisch (dann musst du zusätzlich greek auswählen) oder auf einer osteuropäischen Sprache (z. B. Polnisch, Tschechisch oder Rumänisch).
  2. Bei select styles wählst du die Stärken aus, die du auf deinem Blog verwendest. Auf jeden Fall solltest du 700 dazu nehmen, das entspricht Fettschrift. Wenn du das nicht machst, sieht Fettschrift dann ausgefranst aus.
  3. Bei Copy CSS wählst du Best Support aus (voreingestellt) und kopierst den CSS-Code heraus (am besten in einen einfachen Text-Editor).
  4. Jetzt kannst du Font-Paket herunterladen (im ZIP-Format)!

Wenn du mehrere Google Fonts verwendest, wiederhole die Schritte einfach und kopiere den CSS-Code des zweiten oder dritten Fonts unter den ersten.

4. Auf den FTP-Server hochladen

Nachdem dein Font-Paket heruntergeladen und entpackt hast, musst du die Font-Dateien auf deinen FTP-Server hochladen.

Dazu öffnest du FileZilla (oder einen FTP-Programm deiner Wahl) und gehst zu in das Hauptverzeichnis deiner Domain (dort wo sich WordPress befindet).

Dort legst du einen Ordner an, der fonts heißt und kopierst die heruntergeladenen Schriftarten hinein. Das Ganze sollte dann in etwa so aussehen:

Google Fonts auf FTP-Server hochladen

5. CSS-Code einfügen

Damit Browser wissen, wo sich deine hochgeladenen Font-Dateien befinden, musst du Ihnen dies per CSS sagen.

Dazu kopierst du den CSS-Code, den du in Schritt 3 im Text-Editor zwischengespeichert hast, in die style.css-Datei deines Child-Themes. Das sieht dann so aus:

Google Fonts CSS im Child-Theme

Solltest du mehrere verschiedene Schriftarten, Schriftstärken und/oder Zeichkodierungen benutzen, musst du die einzelnen Code-Abschnitte untereinander einfügen:

CSS von zwei Google Fonts im Child-Theme

Tipp: Wenn du kein Child-Theme hast, findest du bei Webtimiser eine gute Anleitung dazu, wie du dir eins erstellen kannst. Schau auch in die Dokumentation deines Themes, dort gibt es unter Umständen auch Infos dazu oder sogar bereits schlüsselfertige Child-Themes.

6. Google Fonts entfernen

Jetzt musst du nur noch dafür sorgen, dass keine Verbindung mehr zu Google-Servern hergestellt wird.

Am leichtesten geht das per Plugin. So vermeidest du, im Code deines Themes herumzuwurschteln (bei manchen Themes ist es gar nicht so leicht, deren Ursprung ausfindig zu machen).

6.1 Autoptimize

Als erstes würde ich es Autoptimize probieren, das ohnehin ein sehr sinnvolles Plugin ist, um deine Ladezeit zu verbessern.

Google Fonts lassen sich dort Einstellungen > Autoptimize > Extras > Google Fonts entfernen:

Google Fonts entfernen mit Autoptimize

Und wenn du gerade dabei bist, kannst du noch ein Häkchen bei Emojis entfernen setzen. Zwei Fliegen mit einer Klappe (und du deine Website lädt wieder ein paar Millisekunden schneller)!

6.2 Remove Google Fonts References

Bei manchen Themes sind die Fonts sehr tief in das System hineinprogrammiert. Leider funktioniert die Entfernung von Google Fonts mit Autoptimize deshalb nicht immer.

Abhilfe schafft das Plugin Remove Google Fonts References, das Google Fonts in 99% aller Fälle entfernen kann.

Lass dich nicht davon abschrecken, dass es seit 2 Jahren nicht mehr aktualisiert wurde. Ich habe es auf vielen verschiedenen WordPress-Installationen getestet und bisher keine Probleme damit gehabt.

7. Das Ergebnis überprüfen

Hast du alle Schritte erledigt, musst du nur noch überprüfen, ob deine lokalen Fonts richtig geladen werden und ob noch Verbindungen zu Google-Servern hergestellt werden.

Dazu löschst du zunächst den Cache deines Caching-Plugins und von Autoptimize sowie die Dateien in deinem Browser-Cache.

Jetzt schaust du dir deine Website (am besten ausgeloggt) in den Entwickler-Tools an.

Finn Hillebrandt

Über den Autor

Finn ist Gründer von Blogmojo und seit 2011 als Internet-Unternehmer selbstständig. Er ist WordPress-Fan und absoluter SEO-Nerd, der mindestens 2 Case Studys gleichzeitig am Laufen hat, um zu sehen, was bei Google gerade funktioniert. Er liebt Espresso und Schokolade, die so dunkel ist, dass er sie mit niemandem teilen muss (90% und aufwärts).

Werbehinweis für Links mit Sternchen (*)

Es handelt sich um einen Affiliate-Link, das heißt, wenn du auf der verlinkten Website etwas kaufst, erhalten wir eine Provision. Dies hat keinerlei Einfluss darauf, wie wir ein Tool oder einen Anbieter bewerten. Wir empfehlen nur Tools bzw. Anbieter, hinter denen wir auch wirklich stehen. Für dich entstehen dadurch natürlich keine zusätzlichen Kosten! Du hilfst jedoch uns und diesem Projekt. Danke! ❤

Schreibe einen Kommentar

24 Gedanken zu „Wie du Google Fonts lokal und DSGVO-konform in WordPress einbindest (und welche Nachteile das hat)“

  1. Punkt 2 und 3 der Nachteile sind obsolet. Critical CSS löst FOUT (und font-swap kann man immer setzen).

    Und CDNs bringen nicht mehr so viel dank partitioned Cache in Browsern und selber hosten ist konkret performanter (ich hatte es mal gemessen).

    Antworten
    • Hi Daniel,

      ja, du hast Recht. Punkt 2 und 3 sind tatsächlich mittlerweile obsolet (der Artikel war noch von 2018).

      Habe ich gleich mal upgedatet. 😉

      LG

      Finn

      Antworten
  2. Hallo Finn,

    herzlichen Dank für diese übersichtliche und klare Anleitung!

    Was mir noch aufgefallen ist, fast sämtliche Block-Sammlungen laden ebenfalls Google Fonts (Atomic Blocks wohl nicht).
    Wenn ich in Rente bin, mach ich male ein Seite von Themes und Block-Sammlungen “ohne Google Fonts”;)

    Ich lese hier sehr gerne und lerne gerade sehr viel von dir, dickes Kompliment für die Seite!

    Herzliche Grüße
    Irene

    Antworten
    • Hi Irene,

      vielen Dank für den Hinweis und deine lieben Worte! 🙂

      So manche Plugins laden Google Fonts, ohne dass sich das einfach ausschalten ließe (z. T. auch bei Plugins, bei denen man das nicht erwartet, wie bei Gallerie-Plugins).

      In diesem Jahr werde ich mir vielleicht mal gängige Gutenberg-Plugins vorknöpfen und einen Artikel dazu veröffentlichen.

      LG

      Finn

      Antworten
  3. Hallo Finn,

    vielen Dank für deine super Anleitungen und Tipps zum Erstellen eines Blogs. Mir haben diese sehr weiter geholfen und ich konnte viel von dir lernen!

    Nun stehe ich vor einem Problem, für das ich bisher leider keine Lösung finde und zwar: ich habe einen Google Font lokal eingebunden und das in allen verfügbaren Formaten (eot, otf, svg, ttf, woff und woff2). Auf Firefox wird der Font auch richtig angezeigt, jedoch nicht so in Google Chrome. Woran kann das liegen?

    Ich hoffe du hast eine Idee oder einen Tipp.

    Vielen Dank und liebe Grüße
    Jenni

    Antworten
  4. Hallo Finn,

    deine Seite ist echt eine riesige Hilfe und mein Rettungsanker! Ich es zwar durch meine Arbeit gewohnt, mit CMS umzugehen und Websites zu pflegen, aber ich habe noch nie eine selbst gebaut. Daher waren mir deine Anleitung, Tipps und Tricks eine unglaubliche Hilfe für meine eigene Autorenseite. DAAANKE!!

    Allerdings schafft mich die DSGVO und jetzt besonders die Sache mit den Google Fonts. Ich nutze für den Anfang das kostenlose Theme von Ashe (bietet nicht viele Funktionen, weshalb ich es vielleicht mal ändere). Jedenfalls habe ich ganz brav die Fonts per Plugin entfernt: Danach sieht die Seite echt besch… aus. Werde mich mithilfe deiner Anleitung in den nächsten Tagen mal an die Einbindung DSGVO-konformer Schriftarten machen.

    Google ist ja eine schöne Sache, aber in Verbindung mit der Datenschutzverordnung ein Graus für jeden Anfänger.

    Mach weiter so, ich brauche seine Seite 🙂

    LG Emma

    Antworten
    • Hi Emma,

      ich persönlich halte die Nutzung von Google Fonts für recht unbedenklich. Wir nutzen Google Fonts auch auf Faminino (mit Nennung in der Datenschutzerklärung).

      Nutzung nach berechtigtem Interesse lässt sich gut begründen durch Serverentlastung und schnellere Ladezeiten.

      LG

      Finn

      Antworten
      • So habe ich das jetzt auch gemacht :-), da die Sache mit dem Child-Theme irgendwie nicht klappt.
        Ich habe sie unter essentielle Cookies verbucht und in die Datenschutzerklärung aufgenommen.

        LG Emma

        Antworten
  5. Hallo Finn,

    ich möchte keine Werbung machen, aber ich habe einen Weg gefunden, wie man Google Fonts (sowohl von Themes, als auch Plugins) lokal einbinden kann ohne selber etwas zu machen.

    Das Plugin “DSGVO All in one for WP” von Michael Leithold (https://wordpress.org/plugins/dsgvo-all-in-one-for-wp/)

    In der Pro-Version für einmalig 14,99€ werden Google Fonts automatisch, sofern man die Funktion aktiviert hat, lokal eingebunden und Verbindungen zu den Google-Servern unterbunden.
    Eigentlich ist das Plugin eine “Allround-Lösung” bzgl. DSGVO.

    Aber, wie gesagt, ich möchte hier keine Werbung machen, sondern einfach auf dieses Plugin aufmerksam machen.

    Grüße von Jonas

    Antworten
  6. Moin Moin,

    ich nutze das Native Theme von Envato, habe 39 Dollar dafür bezahlt 🙂

    Ich habe die Google Schriften mit “Remove Google Fonts References” entfernt. Mit Google Chrome unter MacOS tauchen im Kontextmemü “untersuchen” die Google Schriften auch nicht mehr auf. Da passt das soweit alles gut. Wenn ich aber die gleiche Webseite mit Google Chrome unter Windows 10 aufrufe, sind die Google Schriften leider immer noch da. Wie kann das? Was ist richtig? Was ist falsch? Sind die Schriften jetzt noch sichtbar, oder nicht? Lügt mich MacOS an, oder Windows 10? 🙂

    Antworten
    • Hi Ralf,

      lösch mal den Browser-Cache und schau, was dann dabei herauskommt. Chrome hat aggressiven Caching-Mechanismus, der nicht so schnell vergisst.

      Check sonst auch noch einmal mit einem externen Tool wie z. B. Webbkoll oder Pingdom Tools.

      LG

      Finn

      Antworten
  7. Hallo Finn,

    danke für Deine tollen Artikel (habe schon viel daraus gelernt) und diese Anleitung hier. Leider will es nicht so richtig klappen. Es funktioniert einwandfrei in Chrome und Firefox, aber in Safari “zerschiesst” es das teilweise das Layout, die Systemschrift wird angezeigt und die Ladezeit ist eher Schneckentempo. Habe alle Schritte so umgesetzt, wie Du es beschrieben hast. Habe alles wieder in den Ursprungszustand versetzt und bin nun ziemlich ratlos. Hast Du evtl. einen Tipp?

    Danke und viele Grüße
    Maike

    Antworten
    • Das ist in einer Ferndiagnose schwer zu sagen. Hast du mal versucht, den Browser-Cache in Safari und den Cache deines Caching-Plugins zu leeren?

      LG

      Finn

      Antworten
  8. Wie kann man denn wissen, dass die lokal eingebunden Fonts nicht auch nach Hause telefonieren? Ich denke, dass sich genau diese Scripte in der entsprechenden Font-Datei befinden und es somit ja eigentlich Wumpe ist wo die Fonts liegen.

    Antworten
    • Hi Steffen,

      lokal eingebunde Fonts können nicht “nach Hause telefonieren”. Das sind statische Font-Dateien (woff., .woff2 etc.), die nur aufgerufen werden, aber von sich aus nichts verändern können.

      LG

      Finn

      Antworten
  9. Hallo Finn,

    da ich mich noch an deinen Namen erinnern konnte, wende ich mich auf diesem Wege an dich; es geht darum, dass ich aus der Facebook-Gruppe DSGVO für Blogger und Online-Unternehmer ausgeschlosen worden bin, in der du meiner Erinnerung nach (ich bekomme die Gruppe bei Facebook ja noch nicht einmal mehr angezeigt) Administrator bist; ich wäre dir wirklich dankbar, wenn du mich wissen lassen würdest (gerne über eine Nachricht bei Facebook oder per E-mail), warum ich einfach ohne Vorwarnung aus der Gruppe fliege – anscheinend wegen der beiden Posts zu den T-Shirts; es hätte doch eigentlich gereicht, die Beiträge zu löschen, wenn ihr meint, dass sie in der Gruppe nichts zu suchen haben; ich habe niemanden beleidigt oder irgendetwas dergleichen getan und hätte gerne weitere Diskussionen verfolgt bzw. mich weiterhin daran beteiligt. Ich hoffe, du antwortest mir wenigstens.

    Susanne

    Antworten
    • Hi Susanne,

      ja, ich habe dich wegen der Posts mit den T-Shirts rausgeworfen.

      Der Administrationsaufwand der Facebook-Gruppe ist sehr hoch. Ich habe keine Zeit, Leute wegen Verstößen vorzuwarnen, zu diskutieren und bei jedem Mitglied lange abzuwägen.

      Ich habe die Blockierung für dich jetzt aufgehoben. Ich nehme dich gerne wieder in die Gruppe auf, wenn du magst (gegeben, dass du Posts über T-Shirts oder ähnliche Posts in Zukunft sein lässt).

      LG

      Finn

      Antworten
  10. Ein gut recherchierter und gut geschriebener Artikel über das lokale Laden von Google Fonts. Ich selbst musste bei meinem gekauften Theme noch viel tiefer schauen. Die Fonts wurden über das Redux-Helper Plugin für dieses Theme geladen und ich musste es in einer php-Daten deaktivieren/auskommentieren. Jetzt muss ich bei jedem Update aufpassen. Den Entwickler habe ich schon angeschrieben.

    Allerdings hat das Laden über den lokalen Server noch einen enormen Vorteil, den man vielleicht auch erläutern könnte: Die Ladegeschwindigkeit kann man enorm verbessern. Denn als einzige Font-Art benötigt man nur die .woff. Alle anderen kann man getrost vernachlässigen. Wenn man nun nur die entsprechenden Font-Stärken lädt, spart man enorm ein.

    Nicht zuletzt sollte man aber die Lizenz der Fonts beachten. Vielleicht hast du ja auch darüber schon geschrieben.

    Ich wollte es nur mal beifügen.

    Gruß
    Ralf

    Antworten
    • Hi Ralf,

      ja, Google Fonts sind manchmal extrem tief in Plugins oder Themes hineinprogrammiert….

      Bei manchen Themes werden auch standardmäßig irgendwelche Google Fonts geladen, selbst wenn andere in den Optionen eingestellt sind, z. B. beim Theme Newspaper von TagDiv. Habe ewig gebraucht, um die zu finden 😉

      Zu den Font-Formaten:

      Es ist gut viele verschiedene Formate anbieten (.eot, .woff, .woff2, .ttf, .svg), weil das die Browser-Kompatibilität erhöht. Die Ladezeit beeinflusst das nicht negativ, denn in der Regel suchen sich die Browser selbst den am besten geeigneten Font raus und laden nur den (bei modernen Browsern .woff2).

      LG

      Finn

      Antworten