Google Fonts lokal einbinden und DSGVO konform nutzen

Auch die Schriftarten von Google sind datenschutzrechtlich ein Problem. Zwar hat Google DSGVO-Konformität zugesichert, allerdings hält das einige Abmahner nicht davon ab, fleißig Abmahnungen wegen Google Fonts zu verschicken. Wenn Du also auf Nummer sicher gehen willst, bau die Fonts lokal ein. In diesem Artikel zeige ich Dir, wie das geht.

Was ist das Problem bei Google Fonts?

Was hat eine Schriftart mit Datenschutz zu tun? Ganz einfach: wenn Du Google Schriftarten über den Google Server einbindest, wird eine Verbindung zum Google-Server in den USA hergestellt, von wo die betreffende Schriftart geladen wird. Dabei wird die IP Adresse Deines Besuchers an Google gesendet, was laut DSGVO ein personenbezogenes Datum ist.

Reicht es nicht, wenn ich Google Fonts in meine Datenschutzerklärung aufnehme?

Laut einem Statement von Google sind Google Fonts von den anderen Google Services entkoppelt und es werden keine Cookies gesetzt.

Eigentlich sollte es reichen, auf die Google Fonts in der Datenschutzerklärung hinzuweisen mit Hinweis auf Art. 6 Abs. 1 lit. f DSGVO (berechtigtes Interesse). Zumal es in Sachen Speed gerade bei Shared Hosting Sinn machen kann, die Fonts vom Google Server zu laden (in der Regel befinden die sich auch schon im Browser-Cache des Nutzers).

Nun gab es aber bereits die ersten Abmahnungen wegen der Nutzung von Google Fonts, und deshalb empfehle ich Dir, um wirklich auf Nummer sicher zu gehen, Google Fonts erstmal lokal einzubinden.

Wie finde ich raus, ob mein Theme überhaupt Google Fonts verwendet?

Die meisten Themes nutzen Google Fonts! Falls Du eins der älteren WordPress Standard Themes wie Twenty Seventeen nutzt, hast Du auf jeden Fall Google Fonts drin. Auch mein geliebtes Genesis Framework, das Divi Theme, die Themes von Elmastudio und viele andere Themes nutzen Google Fonts. Auch Pagebuilder wie Beaver Builder, Thrive oder Elementor setzen diese ein.

Wenn Du in Deinem Browser (Chrome) rechts klickst, erscheint ein kleines Menü. Hier klickst Du auf „Untersuchen“ und bekommst unter „Sources“ die extern geladenen Ressourcen angezeigt.

In diesem Fall für das Twenty Seventeen Theme die Schriftart Libre Franklin in den Stärken 300,400, 600,800 plus die kursive (italic) Variante.

Unterstützt Dein Theme das lokale Laden von Google Fonts?

Auf den meisten meiner Websites nutze ich mittlerweile das Kadence Theme. Kadence erlaubt es, Google Fonts lokal zu laden (zu finden im Customizer unter Allgemein -> Leistung).

Alternativ kannst Du auch einfach Systemschriftarten verwenden wie Arial, Helvetica. Die sind zwar nicht immer die hübschesten, aber ladezeitfreundlich und abmahnresistent!

Schau ggf. in der Dokumentation Deines Themes nach, ob das Theme das lokale Laden von Fonts unterstützt!

Hier auf dieser Website nutze ich GeneratePress. Damit könnte ich Systemschriftarten laden – da ich mich aber für Lato und Playfair Display entschieden habe (beides Google Fonts) entschieden habe, nutze ich das Plugin OMGF:

Die einfache Variante: Google Fonts mit Plugin entfernen

Mittlerweile gibt es einige gute Plugins, mit denen Du ganz leicht Google Fonts entfernen kannst.

OMGF ist ein Plugin, das kostenlos bei WordPress.org erhältlich ist: OMGF bei WordPress

In der Regel kommst Du mit der kostenlosen Version schon gut zurecht. Die Pro Version bietet darüber hinaus Multisite Support und zusätzliche Möglichkeiten der Optimierung, vor allem der Ladezeit.

Auf diesem Blog nutze ich OMGF in Kombination mit GeneratePress.

Auch das Plugin Perfmatters, das ich auf einigen Websites zur Performance Optimierung nutze, bietet das lokale Laden von GoogleFonts an.

Sollte das über ein Plugin nicht funktionieren, probiere den manuellen Weg:

Google Fonts lokal einbinden – Schritt für Schritt Anleitung

Dies ist der manuelle Weg. Mittlerweile gibt es einige praktische Plugins, die das ganz easy erledigen. Manche Themes wie z.B. Kadence haben auch eine eingebaute Möglichkeit, Google Fonts lokal zu laden. Schaue ggf. in der Dokumentation Deines Themes!

Erstelle ein Child Theme

Falls Du es noch nicht getan hast: erstelle ein Child Theme. Falls Du das Genesis Framework nutzt, brauchst Du übrigens nichts weiter zu tun, da Genesis grundsätzlich nur mit Child Themes arbeitet. Bei Genesis ist das Entfernen der Google Fonts übrigens ganz easy, mehr dazu später.

Fonts herunterladen

Lade Dir die entsprechende Schriftart beim Google Webfonts Helper runter, entpacke sie und kopiere sie in einen Unterordner „fonts“ Deines Themes. Das machst Du über FTP, z.B. mit  Filezilla.

Font im Stylesheet einbinden

Nun kopierst Du Dir den Code vom Google Webfonts Helper und bindest ihn in Deine style.css Datei ein. Wichtig: passe die Pfade so an, dass sie für Deine Website passen! Also falls die Schriftarten in einem Unterordner „fonts“ Deines Childthemes hochgeladen sind, lautet das Prefix fonts/.

Die style.css bearbeitest du am besten mit einem HTML- oder Texteditor.

Alte Verweise auf Google Fonts entfernen

Nun musst Du noch die alten Verweise auf Google Fonts entfernen. Dazu hast Du mehrere Möglichkeiten:

Google Fonts über die functions.php entfernen

Hier wieder mein Hinweis: bitte ein Child Theme erstellen!

Nun öffnest Du die functions.php Deines Themes mit einem HTML-, PHP oder Texteditor.

Bei Genesis Themes ist das in der Regel ganz einfach. Google Fonts sind hier in der Regel in der functions.php über die Funktion wp_enqueue_style() eingebunden. Du hast nun zwei Möglichkeiten:

1. Einfach die entsprechende Codezeile löschen. In meinen Screenshots zeige ich es Dir anhand der Beispiele für Genesis Sample und Aspire Theme (welches ich als Grundlage für meine Website verwende) – gelb markiert

2. Oder über die Funktion wp_dequeue_style() wieder entfernen (Diese Anleitung habe ich hier gefunden)

Dazu schauen wir uns einmal die wp_dequeue_style() Funktion genauer an:

• WordPress Funktion – wp_dequeue_style( string $handle )
• Beschreibung – sie entfernt ein vorher eingebundenes CSS Stylesheet
• Parameter – $handle │ obligatorisch. Einzigartiger Name für das eingebundene Stylesheet.

Ein Blick in die functions.php oder in den Quellcode verrät, welches $handle benutzt wird:

Im Falle des Aspire Themes ist es ‚google-fonts‘, nämlich der Teil, der im Stylesheet-Verweis unter „id“ steht, ohne das Suffix -css, das WordPress noch anhängt.

Nun fügst Du folgenden Code in Deine functions.php ein – ersetze hier bitte $handle durch Dein jeweiliges Handle!

//* Google Fonts vom WordPress Theme entfernen
add_action( 'wp_print_styles', 'mh_dequeue_google_fonts_style' );
function mh_dequeue_google_fonts_style() {
      wp_dequeue_style( '$handle' );
}

Beispiel fürs Genesis Sample Theme:

//* Google Fonts vom Genesis Sample WordPress Theme entfernen
add_action( 'wp_print_styles', 'mh_dequeue_google_fonts_style' );
function mh_dequeue_google_fonts_style() {
      wp_dequeue_style( 'genesis-sample-fonts' );
}

Beispiel fürs Divi Theme

//* Google Fonts vom Divi Theme entfernen
add_action( 'wp_print_styles', 'mh_dequeue_google_fonts_style' );
function mh_dequeue_google_fonts_style() {
      wp_dequeue_style( 'divi-fonts' );
}

Je nach Divi Version kann das $handle entweder divi-fonts oder divi-fonts-css lauten – schau am besten in den Quellcode Deiner Seite!

Ein Cheetsheat für weitere populäre Themes findest Du hier.

Vielleicht werde ich es die Tage noch ergänzen ?

Plugin Tipp: Code Snippets

Falls Du nicht in der functions.php fummeln willst, nutze das kleine Plugin Code Snippets. Ich habe es im Laufe meiner DSGVO Service Aktion kennen- und lieben gelernt, denn es erleichtert die Arbeit enorm. Mit diesem Plugin kannst Du ganz einfach Code Snippets in Deine Website einfügen, ohne an die functions.php Hand anzulegen. Und übersichtlicher ist es allemal. Die Snippets kannst Du bei Bedarf auch einfach de- oder wieder reaktivieren.

Einfach einen der obenstehenden Codes (soweit für Dein Theme zutreffend) einfügen und fertig!

Falls Du einen Fehler gemacht hast im Code motzt das Plugin und führt das Snippet nicht aus. Bei einem Fehler in der functions.php legst Du erstmal Deine Seite lahm.

Google Fonts und Pagebuilder

Die oben erwähnten Maßnahmen funktionieren nur mit Themes, die die Schriftarten über wp_enqueue_style einbinden. Manche Pagebuilder, wie z.B. Thrive Architect haben allerdings die Schriftarten so tief im System verankert, dass die vorgestellten Lösungen meist nicht funktionieren. Da hilft nur, den Entwickler zu kontaktieren und ggf. um Abhilfe zu bitten.

Für den Beaver Builder funktioniert das Ganze allerdings sehr gut.Wenn Du im Beaver Builder nur die Default Fonts nutzt, die Du im Stylesheet hinterlegt hast, werden auch keine zusätzlichen Fonts geladen. Oder Du nutzt folgenden Code von Beaver Builder, um sämtliche Google Fonts zu entfernen (siehe Beaver Builder Tutorial, auch zum Thema Font Awesome):

add_action( 'wp_enqueue_scripts', function() {
        global $wp_styles;
        if ( isset( $wp_styles->queue ) ) {
                foreach ( $wp_styles->queue as $key => $handle ) {
                        if ( false !== strpos( $handle, 'fl-builder-google-fonts-' ) ) {
                                  unset( $wp_styles->queue[ $key ] );
                        }
                }
        }
}, 101 );

Die Fonts bleiben dann zwar noch in der Dropdown Liste, aber es werden nur noch die Fonts geladen, die Du wie oben beschrieben lokal eingebunden hast. (Gerade wenn Du Seiten für Kunden erstellst und sichergehen willst, dass sie nicht doch eine Schriftart laden, eine gute Sache.)

Wie Du das Ganze noch optimieren kannst, zeige ich Dir in einem meiner nächsten Artikel. 🙂

Prüfung zum Abschluss

Zum Abschluss überprüfe noch einmal, ob die Schriftarten wirklich nicht mehr von Google kommen. Dazu lädst Du Deine Seite noch einmal neu und öffne noch einmal das Untersuchen Menü in Chrome.

Nun sollten die ganzen Fonts Referenzen verschwunden sein:

Ich hoffe, mit diesem kleinen Tutorial konnte ich Dir ein wenig weiterhelfen. Falls Du noch Fragen hast, stelle sie mir gerne in einem Kommentar!