Google Fonts in WordPess lokal einbinden – für alle Themes

Du hast es sicherlich mitbekommen: Google Fonts von den Servern von Google zu laden ist (leider) illegal. Die DSGVO und so.

Ein „Rechtsanwalt“ in Österreich hat das im August 2022 ausgenutzt und massenhaft Abmahnungen verschickt - dadurch ist das Thema noch einmal so richtig ins Bewusstsein gerückt.

Ungerechtfertigt oder nicht - die Frage ist viel mehr, wie du Google Fonts in WordPress durch lokal hochgeladene Schriften ersetzen kannst.

Hier eine Anleitung, die bei allen Themes und Page-Buildern funktioniert.

Inhalt

Schriften von Google sind illegal?

Ja, das ist leider so.

Wenn du die Schriften vom Google CDN lädst, dann baut der Browser deines Besuchers eine Verbindung zum Server von Google auf und dabei wird die IP-Adresse deines Besuchers zwangsläufig an Google übermittelt.

Genau das ist laut diversen Gerichtsurteilen, Auslegungen der DSGVO usw. nicht erlaubt. Da kann man jetzt diskutieren und philosophieren, ob das gerechtfertigt ist und ob eine IP-Adresse wirklich personenbezogen ist.

Hilft nix, ist so.

Ein „Rechtsanwalt“ aus Österreich hat für seine Mandantin massenhaft abgemahnt. Hier kannst du die Causa nachlesen, ich aktualisiere die Liste immer wieder:

Abgemahnt wegen Google Fonts – was tun?

Eines vorweg: ich bin kein Anwalt, sondern WordPress-Experte und kann/darf/will daher keine Rechtsauskunft geben. Daher folgt im folgenden Absatz meine persönliche Meinung.

Wenn du den Brief erhalten hast, solltest du

  1. durchatmen. Es ist nix tragisches, sondern hauptsächlich lästig.
  2. darauf reagieren. Es beginnen nämlich Fristen zu laufen und das Thema zu ignorieren, bringt nur noch mehr Risiko und Kosten.

Wie solltest du also reagieren?

  1. Erkundige dich bei deiner Interessensvertretung – der WKO – über die Sache.
    Warnung vor Abmahnwelle (WKO)
    Abmahnungen wegen Google Fonts (WKO)
  2. abmahnung.wtf hat tagesaktuelle Infos zur rechtlichen Lage
    Erste Hilfe & empfohlene Vorgehensweise (abmahnung.wft)
  3. RA Peter Harlander hat eine Gegenklage gestartet – ein gutes Konzept, wie ich finde. Ich persönlich würde mich anschließen.
    Google Fonts Abmahnungen (harlander & partner)

Nachdem du rechtlich reagiert hast, solltest du aber auf jeden Fall die Google Fonts von deiner Website entfernen.

Prüfen, ob deine Website Google Fonts verwendet

Dazu gibt es mehrere Möglichkeiten. Die einfachste ist es den Check von Sicher3 zu verwenden, dieser funktioniert meiner Erfahrung nach recht zuverlässig:

Zum Google-Fonts-Checker

Wenn das Ganze bei dir so aussieht, dann ist alles in Ordnung:

Google-Fonts-Checker von Sicher3
Google-Fonts-Checker von Sicher3

Wenn du eine komplette DSGVO-Prüfung durchführen willst, dann wende dich an Elisa von Scaleline und richte ihr liebe Grüße von mir aus.

Manuelle Prüfung auf Google Fonts im Browser

Da mir deine technische Weiterbildung ein Anliegen ist, zeige ich dir auch, wie du manuell prüfen kannst, ob (d)eine Website Google Fonts einbindet.

Öffne dazu die Entwickler-Tools, die mittlerweile jeder moderne Browser mitbringt. Bei Google Chrome funktioniert das auf die folgenden Arten:

  1. Klicke mit der rechten Maustaste auf eine Seite und wähle „Element untersuchen“ aus oder
  2. Wähle im Menü Anzeigen > Entwickler > Entwicklertools aus oder
  3. Verwende die Tastenkombination “Command + Option + i” (mein Favorit, geht am schnellsten).

Du solltest dann am unteren Bildschirmrand die Entwicklertools sehen.

Lade die Seite neu, am besten ohne Caching (also Command + Shift + R).

Im Source-Tab (1) siehst du dann alle Domains, von denen Assets (Bilder, Skripte, aber auch Schriften) geladen werden:

Die Entwicklertools verraten, ob Google Fonts geladen werden
Die Entwicklertools verraten, ob Google Fonts geladen werden

In meinem Beispiel wird hier auf fonts.googleapis.com zugegriffen und eine Schrift geladen. Ich muss hier also tätig werden, um diesen DSGVO-Verstoß zu beseitigen.

Diese Schriftformate solltest du hochladen (woff, woff2, ttf, eot, svg)

Bevor du jetzt die Schriften hochlädt, müssen wir noch klären, in welchen Formaten du dies tun solltest.

Für deinen Computer liegen Schriften meist als .ttf oder .otf-Datei vor. Während TTF zwar von allen modernen Browsern unterstützt wird (Quelle) würde ich dir das Format trotzdem nicht empfehlen. Die TrueType-Dateien sind nämlich größer als notwendig und beeinflussen die Geschwindigkeit deiner Website negativ.

woff2 ist nur halb so groß wie TrueType
woff2 ist nur halb so groß wie TrueType

Wandle daher die TrueTypeDateien in die modernen Formate woff und woff2 um. woff wird (im Gegensatz zu ttf) sogar vom Internet Explorer unterstützt, aktuelle Browser verwenden aber durchgängig das woff2-Format (Quelle).

Beim Google Webfonts Helper kannst du dir die entsprechenden Formate herunterladen. Wähle hier “Modern Browsers” aus.

Die richtigen Formate von Web-Schriften
Die richtigen Formate von Web-Schriften

Die Formate EOT und SVG kannst du dir sparen und, wie oben dargelegt, auch TTF. EOT ist für Internet Explorer 9 von 2011 und SVG für iOS 5 von 2012. Beides also heute nicht mehr notwendig, denn diese Browser unterstützen moderne Funktionen von Webseiten sowieso nicht mehr.

Elementor: Google Fonts lokal installieren

Um Google-Schriften in Elementor* zu ersetzen, lege unter Elementor > Benutzerdefinierte Schriftarten eine neue Schrift an. Füge die entsprechende Schriftstärken hinzu.

woff und woff2 sind ausreichend
woff und woff2 sind ausreichend

Du musst nur die .woff und .woff2-Dateien hochladen, die anderen sind nicht notwendig (siehe oben).

Vergibst du denselben Namen, wird die lokale Schrift geladen, und nicht die von Google. Es kann aber sein, dass nach wie vor Schriften von Google geladen werden, in der Standardeinstellung von Elementor zB. Roboto und Roboto Slab.

Um das zu verhindern und zuverlässig keine Schriften mehr von Google zu laden, füge das folgende Snippet in die functions.php in deinem Child Theme ein:

/**
 * Disable Google Fonts in Elementor
 */
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

Damit wird der entsprechende Aufruf im Elementor Quellcode blockiert und Elementor selbst kann technisch gar keine Schriften von Google mehr nachladen.

Hast du es satt, im Internet stundenlang nach Lösungen zu suchen?

Divi Theme: Google Fonts lokal installieren

Um bei Divi* die Google Schrift lokal hochzuladen, musst du zuerst unter Divi > Theme Optionen den Punkt “Google-Schriftarten verwenden” deaktivieren.

Damit werden die Schriften von Google nicht mehr anzeigt.

Anschließend öffne eine beliebige Seite mit dem Divi Builder und wähle ein Textelement aus. Unter Design > Überschriften > Schriftart – dort, wo du normalerweise die Schriften auswählst – kannst du die neuen Schriften hochladen.

Neue Schrift in Divi hochladen
Neue Schrift in Divi hochladen

Es öffnet sich ein neues Fenster, welches in der Theorie selbsterklärend ist, meiner Erfahrung nach aber ein paar Fallstricke beherbergt:

Neue Schriftart in Divi hochladen
Neue Schriftart in Divi hochladen
  1. Du kannst hier aufgrund eines Bugs nur eine Datei auswählen und hochladen. Mir ist es auf diversen Websites nicht gelungen wie in Elementor mehrere Schriftschnitte hochzuladen.
  2. Du kannst hier nur eine .ttf oder .otf-Schriftdatei auswählen. Das ist kein Problem, weil diese Formate in allen modernen Browser unterstützt werden, aber die Dateigröße ist leider nicht optimal.
  3. Standardmäßig kannst du in WordPress keine .ttf oder .otf-Dateien hochladen. Divi ändert diese Einstellung auch nicht temporär, wie es Elementor tut.

Füge daher die folgende Zeile zur wp-config.php hinzu:

define('ALLOW_UNFILTERED_UPLOADS', true);

Danach kannst du die Dateien in die WordPress-Mediathek hochladen.

Vergiss nicht, diese Zeile wieder aus der wp-config.php zu entfernen, wenn du fertig bist. Die Dateien bleiben trotzdem in der Mediathek erhalten.

Avada Theme: Google Fonts entfernen

In Avada kannst du mit einer einfachen Einstellung festlegen, ob die Schriften von Google oder lokal geladen werden sollen.

Gehe dazu zu Avada > Optionen > Datenschutz. Hier kannst du bequem auswählen, ob die Schriften lokal oder vom CDN geladen werden sollen.

Avada macht es besonders einfach
Avada macht es besonders einfach

Enfold Theme: Google Fonts deaktivieren

Bei Enfold kommst du um etwas manuelle Arbeit nicht herum.

Im Schritt 1 deaktiviere die Ausgabe der Google-Schriften, indem du den folgenden Code in die functions.php in deinem Child-Theme einfügst:

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

Im zweiten Schritt lade die entsprechenden Schriften vom Google Webfonts Helper herunter:

So lädst du Schriften korrekt von Google herunter
So lädst du Schriften korrekt von Google herunter
  1. Wähle “Modern Browsers”, die anderen Dateien benötigst du nicht.
  2. Gib hier ‘./fonts/‘ ein.
  3. Kopiere das CSS-Snippet und füge es in die style.css deines Child-Themes ein.
  4. Lade die Schriften herunter und speichere sie in deinem Child-Theme im Ordner ‘fonts’ ab.

Damit werden die Schriften aus deinem Child-Theme geladen.

Porto Theme: Google Fonts deaktivieren

Im Porto-Theme* kannst du das Laden von Google-Schriften verhindern, indem du den folgenden Code zur functions.php deines Child-Themes hinzufügst:


/**
 * Disable Google Fonts
 */
add_action( 'wp_print_styles', function() {
	wp_deregister_style('porto-google-fonts');
	wp_dequeue_style('porto-google-fonts');
});

Anschließend kannst du die Schrift wie oben bei Enfold angegeben herunterladen und einbinden.

Alle Themes und Plugins: Google Fonts deaktivieren ohne weiteres Plugin

Google Fonts lassen sich für ziemlich jedes Theme (oder auch Plugin) mit ein paar Zeilen Code deaktivieren. Dazu musst du herausfinden, welche ID der Aufruf der CSS-Dateien hat.

Sieh dir dazu den Quellcode der Website an (Rechtsklick > Quellcode anzeigen bzw. Command + Option + U) und suche nach “fonts.googleapis.com”:

Im Screenshot siehst du die ID, in diesem Fall “porto-google-fonts”, also ohne das “-css” danach.

Füge dann folgenden Code in die functions.php deines Child-Themes ein:

/**
 * Disable Google Fonts
 */
add_action( 'wp_print_styles', function() {
	wp_deregister_style('DIE-ID');
	wp_dequeue_style('DIE-ID');
});

DIE-ID ersetzt du durch den oben gefundenen String, z.B. porto-google-fonts.

Wiederhole die Schritte für jede gefundene Einbindung von Google Fonts.

Für das Theme Attitude Pro sieht das dann so aus:

/**
 * Disable Google Fonts
 */
add_action( 'wp_print_styles', function() {
	wp_deregister_style('attitude_google_font');
	wp_dequeue_style('attitude_google_font');
	wp_deregister_style('open-sans-condensed');
	wp_dequeue_style('open-sans-condensed');
	wp_deregister_style('open-sans');
	wp_dequeue_style('open-sans');
});

Anschließend kannst du die Schrift wie oben bei Enfold beschrieben herunterladen und einbinden.

Mit diesem Code-Snippet kannst du Google Fonts bei jedem beliebigen Theme deaktivieren. Ohne zusätzliches Plugin. Ohne Magie. Ohne Performance-Verlust.

Google Fonts – eigentlich sehr sinnvoll.

Ich finde die ganze Aufregung um Google Fonts sehr schade. Denn die Schriften von einem schnellen, weltweiten CDN zu laden hat einige Vorteile:

  • Google ist definitiv schneller als deine eigene Website.
  • Schriftdateien können im Browser-Cache landen, dh. sie müssen nicht von jeder besuchten Website erneut heruntergeladen werden.
  • Google Fonts werden in so ziemlich jedem Theme, jedem Page-Builder oder jeder Design-App (Figma, Canva usw.) automatisch und ohne Konfiguration unterstützt.
  • Google optimiert die Schriften für den jeweiligen Browser, der die Schriften anfordert. Dein eigener Server liefert hingegen allen Browser dieselben Dateien aus.
  • Wenn es Updates für die Schriften gibt (ja, die gibt es!), dann musst du nichts weiter tun. Das Team von Google kümmert sich darum.
Ein Fehler mit heruntergeladenen Schriften - mit Google Fonts gibt es das Problem nicht
Ein Fehler mit heruntergeladenen Schriften – mit Google Fonts gibt es das Problem nicht

Aber der Gesetzgeber hat entschieden, dass es nicht zulässig ist, die Schriften von Google zu laden.

Daher bleibt dir nichts anderes über, als die Schriften auf deiner Website lokal einzubinden.

Bleibt nur die Hoffnung, dass sich diese Thematik in Zukunft ändern wird. Wobei ich nicht davon ausgehe.

Lass mich gerne wissen, wenn du Unterstützung bei der Beseitigung von Google Fonts auf deiner Website benötigst.

Für eine komplette DSGVO-Überprüfung wende ich gerne an Elisa von Scaleline.

Peace ✌️,

Michael

Fragen zu Google Fonts und der DSGVO

Wie kann ich Google Fonts entfernen?

Um Google Fonts zu entfernen gehe wie folgt vor:

  1. Finde benutze Google Fonts heraus.
  2. Lade benötigte Google Fonts herunter.
  3. Lade die Google Fonts auf deinen Server hoch.
  4. Passe das CSS auf einer Website an.
  5. Deaktiviere die Verbindung zu Google Fonts.
  6. Prüfe, ob alle Google Fonts lokal geladen werden.

Hier findest du die genaue Anleitung.

Woher weiß ich, ob ich Google Fonts verwende?

Die einfachste Möglichkeit ist es, den Google-Fonts-Checker zu verwenden.

Alternativ schau dir den Quelltext der Website an oder – noch besser – nutze die Entwickler-Tools deines Browsers.

Wie das geht erfährst du hier.

Wo kann ich Google Fonts downloaden?

Auf https://github.com/google/fonts/ kannst du eine ZIP-Datei mit allen Schriften herunterladen. Achtung – hier sind keine Web-Schriften enthalten.

Daher empfehle ich dir den Google Webfonts Helper zu verwenden, hier kannst du die Schriften in verschiedenen Formaten herunterladen.

Benötige ich EOT und SVG-Dateien? Ich finde diese nirgends.

Nein, diese beiden Dateiformate sind nicht mehr notwendig und komplett veraltet. Alle aktuellen Browser unterstützen die Formate WOFF und WOFF2.

Wie kann ich prüfen, ob meine Website DSGVO-konform ist?

Wende dich bezüglich eines kompletten DSGVO-Checks deiner Website gerne an Elisa von Scaleline. Und richte ihr liebe Grüße von mir aus :-)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Projektanfrage

Wobei kann ich dich unterstützen?

Noch mehr Spezialwissen?