Ratgeber / Datenschutz

Google Fonts lokal einbinden: WordPress, Elementor, Divi und Shopify

Google Fonts lokal einbinden heißt: Die Schriftdateien liegen auf deinem eigenen Server, statt bei jedem Seitenaufruf von Google geladen zu werden. Dann überträgt der Browser deiner Besucher keine IP-Adresse an Google, und das Risiko, das das Landgericht München I im Januar 2022 festgestellt hat, ist vom Tisch. Hier prüfst du in zwei Minuten, ob deine Website Google Fonts lädt, und stellst sie Schritt für Schritt um, mit oder ohne Plugin.

01 / Ratgeber

Warum Google Fonts lokal einbinden? Das Urteil des LG München I

Mit Urteil vom 20.01.2022 (Az. 3 O 17493/20) hat das Landgericht München I entschieden: Bindet eine Website Google Fonts dynamisch ein, also direkt von den Servern von Google, und wird dabei ohne Einwilligung die IP-Adresse des Besuchers an Google übermittelt, verletzt das dessen allgemeines Persönlichkeitsrecht und sein Recht auf informationelle Selbstbestimmung. Die IP-Adresse ist ein personenbezogenes Datum. Ein berechtigtes Interesse sah das Gericht nicht, weil sich die Schriften auch ohne Verbindung zu Google nutzen lassen. Der Betreiber musste die Einbindung unterlassen und 100 Euro Schadensersatz zahlen.

Danach verschickten 2022 zahlreiche Absender Abmahnungen und Zahlungsaufforderungen an Website-Betreiber, viele davon rechtlich umstritten. Unabhängig davon, wie man diese Welle bewertet: Die technische Lösung ist einfach, kostet nichts und macht die Seite meist sogar schneller. Dieser Ratgeber erklärt die Technik. Er ist keine Rechtsberatung. Bei einer konkreten Abmahnung hilft dir ein Anwalt.

02 / Ratgeber

Was „lokal“ technisch bedeutet

Bei der dynamischen Einbindung steht im Quelltext deiner Website ein Verweis auf fonts.googleapis.com. Der Browser lädt von dort eine CSS-Datei und danach die eigentlichen Schriftdateien von fonts.gstatic.com. Bei beiden Abrufen sieht Google die IP-Adresse des Besuchers.

Bei der lokalen Einbindung lädst du die Schriftdateien einmal herunter, legst sie auf deinen Webserver und beschreibst sie in deiner eigenen CSS-Datei. Der Browser spricht dann nur noch mit deinem Server. Die meisten Google Fonts stehen unter freien Lizenzen wie der SIL Open Font License, die das Selbsthosten ausdrücklich erlauben.

03 / Ratgeber

So prüfst du, ob deine Website Google Fonts lädt

  1. 01

    Privates Fenster öffnen

    Öffne deine Website in Chrome oder Firefox in einem privaten Fenster, damit keine alten Daten im Cache stören.

  2. 02

    Entwicklertools starten

    Drück F12 (am Mac Cmd + Option + I) und wechsle in den Reiter Netzwerk. Setz den Haken bei „Cache deaktivieren“.

  3. 03

    Seite neu laden und filtern

    Lade die Seite neu und gib im Filterfeld fonts.g ein. Erscheinen Einträge von fonts.googleapis.com oder fonts.gstatic.com, lädt deine Seite noch Schriften von Google.

  4. 04

    Unterseiten prüfen

    Wiederhole das auf der Kontaktseite, auf Blogartikeln und auf Seiten mit Karten, Videos oder Formularen. Oft lädt nicht das Theme die Schriften, sondern ein einzelnes Plugin oder eine eingebettete Google-Karte.

  5. 05

    Quelltext gegenprüfen

    Zusätzlich hilft ein Blick in den Quelltext (Strg + U) und eine Suche nach fonts.googleapis. Findest du nichts und zeigt auch der Netzwerk-Tab nichts, ist die Seite in diesem Punkt sauber.

04 / Ratgeber

Google Fonts lokal einbinden ohne Plugin

Dieser Weg funktioniert auf jeder Website, auch ohne WordPress, und auf WordPress mit einem Child-Theme:

  1. 01

    Schriften und Schnitte notieren

    Schreib auf, welche Schriften in welchen Stärken genutzt werden, etwa Inter 400 und 700. Jeder unnötige Schnitt kostet Ladezeit.

  2. 02

    Dateien herunterladen

    Mit dem kostenlosen google-webfonts-helper (gwfh.mranftl.com) wählst du Schrift, Zeichensatz und Schnitte und bekommst die Dateien im modernen Format WOFF2 samt fertigem CSS.

  3. 03

    Hochladen

    Lade die Dateien in einen Ordner auf deinem Server, zum Beispiel /fonts/ oder in den Ordner deines Child-Themes.

  4. 04

    @font-face eintragen

    In deine CSS-Datei gehört pro Schnitt ein Block nach diesem Muster: @font-face { font-family: "Inter"; src: url("/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

  5. 05

    Alten Verweis entfernen

    Lösche das link-Tag zu fonts.googleapis.com aus dem Kopfbereich und jedes @import auf Google Fonts in CSS-Dateien. In WordPress entfernst du die vom Theme geladene Datei im Child-Theme mit wp_dequeue_style.

  6. 06

    Nachprüfen

    Prüf die Seite wieder im Netzwerk-Tab. Es dürfen keine Anfragen an fonts.googleapis.com oder fonts.gstatic.com mehr auftauchen.

05 / Ratgeber

Google Fonts lokal einbinden in WordPress

Schau zuerst in die Theme-Einstellungen. Viele verbreitete Themes, darunter Astra und Kadence, haben im Customizer eine Option, Google Fonts lokal zu laden. Ist sie aktiv, lädt das Theme die Schriften beim ersten Aufruf herunter und liefert sie danach von deinem Server aus.

Lädt nicht nur das Theme Schriften, sondern auch Plugins wie Slider, Formulare oder Page Builder, hilft ein spezialisiertes Plugin. OMGF (Optimize My Google Fonts) sucht die Google-Fonts-Einbindungen auf deinen Seiten, lädt die Dateien herunter und ersetzt die Verweise. Eine Alternative ist das Plugin Local Google Fonts. Prüf danach trotzdem jede wichtige Unterseite im Netzwerk-Tab, denn kein Plugin erwischt jede Einbindung. Ein Cache-Plugin musst du nach der Umstellung leeren, sonst siehst du noch die alte Version.

06 / Ratgeber

Elementor: Google Fonts lokal einbinden

Elementor lädt standardmäßig alle Schriften, die du im Editor auswählst, von Google. Aktuelle Elementor-Versionen bieten in den Elementor-Einstellungen eine Option, Google Fonts lokal zu laden. Aktiviere sie, leere den Elementor-Cache (CSS-Dateien neu generieren) und prüf danach im Netzwerk-Tab.

Fehlt die Option in deiner Version, kannst du Google Fonts in den Elementor-Einstellungen ganz abschalten und die Schriftdateien mit Elementor Pro unter „Eigene Schriftarten“ hochladen. Ohne Pro übernimmt OMGF diese Aufgabe. Denk an die globalen Schriften in den Website-Einstellungen von Elementor: Sie bestimmen, welche Schriften überall verwendet werden.

07 / Ratgeber

Divi: Google Fonts lokal einbinden

In Divi findest du unter Divi, Theme-Optionen, Allgemein den Schalter für Google Fonts. Schaltest du ihn aus, lädt Divi keine Schriften mehr von Google. Die gewünschte Schrift lädst du dann als eigene Datei über das Schrift-Menü in den Design-Einstellungen eines Moduls hoch, danach steht sie in allen Modulen zur Auswahl. Prüf auch hier anschließend alle wichtigen Seiten und leere den Divi- und den Seiten-Cache.

08 / Ratgeber

Shopify: Google Fonts lokal einbinden

Die Schriften aus der Schriftbibliothek im Shopify-Theme-Editor liefert Shopify von seinen eigenen Servern aus, nicht von Google. Google Fonts tauchen in Shopify-Shops trotzdem auf, wenn ein Theme, eine App oder eine frühere Anpassung sie direkt einbindet.

Prüf deinen Shop im Netzwerk-Tab. Findest du Google-Anfragen, öffne unter Onlineshop, Themes, Code bearbeiten die Datei theme.liquid und such nach fonts.googleapis. Lade die WOFF2-Dateien unter Inhalte, Dateien oder in den Ordner assets des Themes hoch und trag sie per @font-face in die CSS-Datei des Themes ein. Kommt die Einbindung von einer App, etwa einem Bewertungs-Widget, hilft oft eine Einstellung in der App oder ein Hinweis an den App-Anbieter. Für individuelle Shops mit voller Kontrolle über jede eingebundene Datei bauen wir Shopify Hydrogen.

09 / Ratgeber

Was außer Schriften noch Daten an Google schickt

Wer die Schriften umgestellt hat, findet im Netzwerk-Tab oft weitere Google-Anfragen. Sie sind nicht Teil des Münchner Urteils, werfen aber ähnliche Fragen auf:

QuelleWoran du es erkennstÜblicher Umgang
Eingebettete Google MapsAnfragen an maps.googleapis.com und oft fonts.googleapis.comErst nach Klick oder Einwilligung laden, sonst ein Bild mit Link zur Karte
YouTube-VideosAnfragen an youtube.com oder youtube-nocookie.comVorschaubild mit Klick zum Laden des Videos
Google reCAPTCHAAnfragen an google.com/recaptchaEinwilligung einholen oder datensparsame Alternative nutzen
Google Analytics und Tag ManagerAnfragen an googletagmanager.comNur mit Einwilligung über das Cookie-Banner

10 / Ratgeber

Datenschutzerklärung anpassen und Abmahnung richtig einordnen

Lädt deine Website nach der Umstellung nichts mehr von Google Fonts, kannst du den entsprechenden Abschnitt aus der Datenschutzerklärung entfernen oder anpassen. Prüf das nach jedem größeren Theme- oder Plugin-Update erneut, weil Updates Einstellungen zurücksetzen oder neue Einbindungen mitbringen können.

Hast du eine Abmahnung oder Zahlungsaufforderung wegen Google Fonts bekommen, stell die Website sofort technisch um, dokumentiere den Zeitpunkt mit Screenshots aus dem Netzwerk-Tab und lass das Schreiben von einem Anwalt prüfen, bevor du zahlst oder eine Unterlassungserklärung unterschreibst. Was rechtlich richtig ist, hängt vom Einzelfall ab. Dieser Ratgeber ersetzt keine Rechtsberatung.

11 / Ratgeber

Nebeneffekt: Lokale Schriften laden schneller

Ohne zusätzliche Verbindungen zu zwei Google-Servern startet die Schriftdarstellung früher, und mit nur den benötigten Schnitten im Format WOFF2 sinkt die Datenmenge. Wenn deine Seite generell träge ist, findest du im Ratgeber WordPress langsam die weiteren Bremsen. Unsere eigenen Projekte im Webdesign und in der Webentwicklung sind handgecodet, und die Schriften liegen dort vom ersten Tag an lokal.

FAQ

Häufige Fragen

01Ist es verboten, Google Fonts zu verwenden?

Nein. Die Schriften selbst sind frei nutzbar. Das LG München I hat am 20.01.2022 (Az. 3 O 17493/20) die dynamische Einbindung von Google-Servern ohne Einwilligung beanstandet, weil dabei die IP-Adresse an Google übertragen wird. Lokal eingebundene Google Fonts sind davon nicht betroffen. Das ist keine Rechtsberatung.

02Darf ich Google Fonts herunterladen und auf meinem Server speichern?

Ja. Die meisten Google Fonts stehen unter freien Lizenzen wie der SIL Open Font License, die Nutzung, Weitergabe und Selbsthosten erlauben. Die Lizenz jeder Schrift steht auf ihrer Seite bei Google Fonts.

03Reicht es, Google Fonts über das Cookie-Banner abzufragen?

Technisch ist eine Einwilligung möglich, dann dürfen die Schriften aber erst nach der Zustimmung geladen werden, und ohne Zustimmung sieht die Seite anders aus. Die lokale Einbindung ist einfacher, schneller und braucht keine Einwilligung.

04Wie prüfe ich, ob meine Website noch Google Fonts lädt?

In den Entwicklertools des Browsers (F12) im Reiter Netzwerk mit deaktiviertem Cache die Seite neu laden und nach fonts.g filtern. Tauchen fonts.googleapis.com oder fonts.gstatic.com auf, werden noch Schriften von Google geladen. Mehrere Unterseiten prüfen.

05Lädt Shopify Schriften von Google?

Die Schriften aus der Shopify-Schriftbibliothek kommen von Shopifys eigenen Servern. Google Fonts erscheinen nur, wenn ein Theme, eine App oder eigener Code sie direkt einbindet. Das zeigt der Netzwerk-Tab.

06Was mache ich bei einer Google-Fonts-Abmahnung?

Website sofort umstellen, den Zeitpunkt dokumentieren und das Schreiben von einem Anwalt prüfen lassen, bevor du zahlst oder etwas unterschreibst. Ob und was du schuldest, hängt vom Einzelfall ab.

Kontakt

Schriften lokal, Website sauber

Schick uns deine Domain. Wir prüfen, was zu Google verbindet, und sagen dir den schnellsten Weg zur Lösung, mit Festpreis.

Website prüfen lassen ↗