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

Google Fonts lokal einbinden – Schritt für Schritt Anleitung

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 mit Plugin entfernen

Es gibt einige Plugins, mit denen Du Google Fonts entfernen kannst:

Disable Google Fonts: dieses Plugin funktioniert gut mit den Standardthemes von WordPress wie Twenty Twelve, Twenty Thirteen, Twenty Fourteen, Twenty Fifteen, Twenty Sixteen, Twenty Seventeen.

Alternativen sind Remove Google Fonts References und Autoptimize (was auch Emojis entfernt)

Die beiden erstgenannten Plugins verrichten ihren Dienst übrigens ganz ohne Einstellung, direkt nach Aktivierung.

Ich finde die Lösung über die functions.php allerdings besser. Bei manchen Themes und Pagebuildern funktioniert das allerdings nicht (so z.B. Thrive Themes – hier ist die Variante über das Autoptimize Plugin ggf. besser geeignet)

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 Aspire Theme

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

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!

Beispiel fürs Twenty Seventeen Theme

//* Google Fonts vom Twenty Seventeen WordPress Theme entfernen
add_action( 'wp_print_styles', 'mh_dequeue_google_fonts_style' );
function mh_dequeue_google_fonts_style() {
      wp_dequeue_style( 'twentyseventeen-fonts' );
}

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 (außer Autoptimize) 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!