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

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 das ausgenutzt für seine Mandantin massenhaft abgemahnt. In Deutschland sind Abmahnungen leider sowieso ein größeres Thema.

Die folgende Liste enthält aktuelle Informationen zu den Abmahnungen wegen Google Fonts. Ich aktualisiere die Liste immer wieder:

• “Datenschutzanwalt” fordert 190 Euro von Websites für Einbindung von Google-Schriftarten (derStandard.at)
• Angeblicher DSGVO-Verstoß: Abmahnwelle wegen Google Fonts (Heise)
• Google-Schriftarten: Mandantin soll sich in AMS-Kurs umfassende IT-Kenntnisse angeeignet haben (derStandard.at)
• Wackeliges Geschäftsmodell – weitere Massenabmahnungen wegen Google Fonts (heise.de)
• Google äußert sich zur Abmahnwelle wegen Google Fonts (heise.de)
• Abmahnungen überschreiten 5 Millionen Euro: LinkedIn – derStandard – Kurier
• Der österreichische Abmahnanwalt ist gescheitert
• Hotel erwirkt Hausverbot gegen Eva Z.

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 – in Österreich ist das die 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)

Dr. Schwenke hat ebenso einen umfassenden Artikel zum Thema veröffentlicht.

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:

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!). Übrigens, Website-Heroes erhalten Sonderkonditionen bei Elisa.

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:

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

Wasserdichte Angebote schreiben in nur 10 Minuten?

Hol dir die ultimative Angebotsvorlage für Webdesigner, Web-Programmierer und Online-Marketer.

Mehr erfahren

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.

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 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.

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 im Frontend gar keine Schriften von Google mehr nachladen.

Ab Elementor Version 3.10.0 kannst du unter Elementor > Einstellungen > Erweitert die Verwendung von Google Fonts deaktivieren.

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.

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

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.

Du siehst schon, Divi ist hier nicht so bequem wie Elementor. Eventuell lohnt sich ja ein Wechsel von Divi zu Elementor?

Kennst du schon das Business-Membership für alle WordPress-Professionals?

Workshops, Live-Q&A’s, Austausch mit anderen Webdesigner:innen, Co-Working und natürlich professioneller Support für dich. Das sind die Website Heroes.

Mehr erfahren

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.

Super praktisch, wie ich finde.

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:

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 WordPress-Themes und Plugins: Google Fonts deaktivieren ohne extra 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 veraltete 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 es je sein wird.
• Schriftdateien können theoretisch 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.

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.

Und wie schon erwähnt: für eine komplette DSGVO-Überprüfung wende ich gerne an Elisa von Scaleline.

Peace ✌️,

Michael

Fragen zu Google Fonts und der DSGVO