Google Fonts in WordPress lokal einbinden: Der ultimative Leitfaden

Warum Google Fonts lokal einbinden?

Google Fonts sind eine beliebte Möglichkeit, um Webseiten ansprechend zu gestalten. Sie bieten eine große Auswahl an Schriftarten, die sich einfach einbinden lassen. Allerdings gibt es datenschutzrechtliche Bedenken, wenn sie direkt von den Google-Servern geladen werden. In der EU müssen Webseitenbetreiber sicherstellen, dass keine personenbezogenen Daten ohne Zustimmung des Nutzers an Dritte weitergegeben werden. Wenn Sie Google Fonts von externen Servern laden, werden IP-Adressen Ihrer Besucher an Google übermittelt – ein Verstoß gegen die DSGVO. Die Lösung? Die Google Fonts lokal auf Ihrem Server hosten.

Vorteile des lokalen Einbindens von Google Fonts

1. DSGVO-Konformität: Vermeidung von Abmahnungen durch Datenschutzverstöße.
2. Schnellere Ladezeiten: Kein externer Serveraufruf notwendig, was die Performance verbessert.
3. Bessere Kontrolle: Sie können selbst bestimmen, welche Schriftarten und -varianten geladen werden.
4. Unabhängigkeit von Google-Servern: Falls Google Änderungen an den Fonts vornimmt oder sie entfernt, bleibt Ihre Webseite davon unberührt.

Schritt-für-Schritt-Anleitung: Google Fonts in WordPress lokal einbinden

Schritt 1: Schriftarten mit Google Webfonts Helper herunterladen

Google bietet selbst keine direkte Möglichkeit, Fonts herunterzuladen. Stattdessen können Sie den Dienst Google Webfonts Helper nutzen. Gehen Sie wie folgt vor:

1. Besuchen Sie die Website: https://google-webfonts-helper.herokuapp.com
2. Wählen Sie die gewünschte Schriftart aus.
3. Wählen Sie die benötigten Schriftschnitte (z. B. Regular, Bold, Italic).
4. Aktivieren Sie „Modern Browsers“ für eine optimierte Version mit WOFF und WOFF2-Formaten.
5. Laden Sie das ZIP-Archiv herunter.

Schritt 2: Schriftarten in Ihr WordPress hochladen

1. Entpacken Sie das heruntergeladene ZIP-Archiv.
2. Verbinden Sie sich per FTP oder Dateimanager mit Ihrem WordPress-Server.
3. Navigieren Sie zum Verzeichnis: wp-content/uploads/fonts/ (Falls das Verzeichnis nicht existiert, erstellen Sie es.)
4. Laden Sie die Schriftarten in diesen Ordner hoch.

Schritt 3: CSS-Datei für die Schriftarten erstellen

Jetzt müssen Sie WordPress mitteilen, dass die Schriftarten verwendet werden sollen.

1. Öffnen Sie den Code-Editor und erstellen Sie eine neue CSS-Datei mit dem Namen custom-fonts.css.
2. Fügen Sie den folgenden Code hinzu:

@font-face {
  font-family: 'MeineSchriftart';
  src: url('/wp-content/uploads/fonts/meineschriftart.woff2') format('woff2'),
       url('/wp-content/uploads/fonts/meineschriftart.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

3. Speichern Sie die Datei und laden Sie sie in das Verzeichnis wp-content/uploads/fonts/ hoch.

Schritt 4: CSS-Datei in WordPress einbinden

Damit WordPress die lokal gehosteten Schriftarten nutzt, müssen Sie das Stylesheet in Ihre Webseite einfügen. Das geht am einfachsten mit dem functions.php-File Ihres Themes.

1. Öffnen Sie functions.php über den Theme-Editor oder per FTP.
2. Fügen Sie folgenden Code hinzu:

function custom_fonts() {
  wp_enqueue_style('custom-fonts', get_template_directory_uri() . '/wp-content/uploads/fonts/custom-fonts.css');
}
add_action('wp_enqueue_scripts', 'custom_fonts');

Schritt 5: Schriftarten in WordPress aktivieren

Nun können Sie Ihre neue Schriftart in den WordPress-Einstellungen oder direkt im CSS Ihrer Webseite nutzen:

body {
  font-family: 'MeineSchriftart', sans-serif;
}

Alternative: Nutzung eines Plugins

Falls Sie sich nicht mit Code beschäftigen möchten, gibt es eine einfachere Möglichkeit. Nutzen Sie ein WordPress-Plugin, das Ihnen die Arbeit abnimmt. Hier sind einige gute Optionen:

1. OMGF – Optimize My Google Fonts: Automatische Erkennung und Lokalisierung von Google Fonts.
2. Disable Google Fonts: Deaktiviert externe Google Fonts und lässt Sie eigene Schriften einbinden.
3. Local Google Fonts: Erkennt automatisch externe Google Fonts und speichert sie lokal.

Externe Google Fonts in WordPress-Plugins deaktivieren

Einige WordPress-Themes und Plugins laden Google Fonts automatisch über externe Server. Um diese zu deaktivieren, können Sie den folgenden Code in die functions.php-Datei einfügen:

add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

Falls Ihr Theme Google Fonts einbindet, finden Sie die entsprechenden Einstellungen oft unter Theme-Einstellungen oder in der Customizer-Ansicht.

Fazit

Google Fonts lokal in WordPress einzubinden ist nicht nur eine gute Idee für den Datenschutz, sondern bringt auch Vorteile für die Performance Ihrer Webseite. Mit den oben genannten Methoden können Sie Ihre Webseite DSGVO-konform machen und gleichzeitig für schnellere Ladezeiten sorgen. Falls Sie sich nicht mit manuellem Code befassen möchten, helfen Plugins dabei, den Prozess zu automatisieren. So stellen Sie sicher, dass Ihre WordPress-Seite rechtskonform und optimiert bleibt!