Google Fonts sind eine der beliebtesten Methoden, um Schriftarten auf Webseiten einzubinden. Besonders im E-Commerce-Bereich, wo das Design und die Benutzererfahrung eine wichtige Rolle spielen, sind Google Fonts eine ausgezeichnete Wahl. Allerdings gibt es in letzter Zeit immer mehr Diskussionen über die Datenschutzbestimmungen, insbesondere im Zusammenhang mit der Datenschutz-Grundverordnung (DSGVO) in Europa. Wenn Sie einen WordPress-Shop betreiben und Google Fonts verwenden, sollten Sie sicherstellen, dass Ihre Webseite datenschutzkonform ist. Eine Möglichkeit, dies zu erreichen, ist die lokale Einbindung von Google Fonts.

In diesem Blogbeitrag erfahren Sie, wie Sie Google Fonts in Ihrem WordPress-Shop lokal einbinden können, um Datenschutzprobleme zu vermeiden, und warum diese Vorgehensweise sinnvoll ist.

Warum Google Fonts lokal einbinden?

Bevor wir uns mit dem „Wie“ beschäftigen, sollten wir zunächst das „Warum“ klären. Die Integration von Google Fonts auf Ihrer WordPress-Website erfolgt standardmäßig über eine externe Verbindung zu den Servern von Google. Dies bedeutet, dass bei jedem Besuch auf Ihrer Seite Daten an Google gesendet werden. Es gibt zwei Hauptgründe, warum dies problematisch sein kann:

1. Datenschutzbedenken (DSGVO):
   • Laut der Datenschutz-Grundverordnung (DSGVO) müssen personenbezogene Daten, die von Nutzern erfasst werden, innerhalb der EU verarbeitet werden oder zumindest mit den entsprechenden Schutzmaßnahmen versehen sein. Google ist ein Unternehmen aus den USA, was die Übertragung von Daten an deren Server problematisch macht, da es nicht in den Geltungsbereich der EU-Rechtsvorschriften fällt.
2. Ladezeiten optimieren:
   • Wenn Google Fonts lokal eingebunden werden, müssen die Schriftarten nicht mehr von externen Servern geladen werden, was die Ladezeit Ihrer Website verbessern kann. Dies führt zu einer besseren Benutzererfahrung und ist auch für die SEO von Vorteil.

Das lokale Einbinden von Google Fonts ist also sowohl eine Frage der Datenschutzkonformität als auch der Website-Optimierung. Aber wie machen wir das?

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

Im Folgenden führen wir Sie durch die einzelnen Schritte, die notwendig sind, um Google Fonts lokal auf Ihrem WordPress-Shop zu integrieren.

1. Schritt: Google Fonts herunterladen

Der erste Schritt besteht darin, die Schriftarten, die Sie auf Ihrer WordPress-Seite verwenden möchten, herunterzuladen. Google stellt auf seiner Website eine breite Sammlung an kostenlosen Schriftarten zur Verfügung.

1. Gehen Sie zu Google Fonts.
2. Wählen Sie die Schriftarten aus, die Sie verwenden möchten. Sie können eine oder mehrere Schriftarten auswählen.
3. Klicken Sie auf das „+“-Symbol, um die Schriftart zu Ihrer Auswahl hinzuzufügen.
4. Klicken Sie auf das Auswahlfeld in der unteren rechten Ecke, um den „Download“-Button zu sehen.
5. Laden Sie die Schriftart-Dateien auf Ihren Computer herunter.

2. Schritt: Schriftart-Dateien auf den Server hochladen

Sobald Sie die Schriftart-Dateien heruntergeladen haben, müssen Sie diese auf Ihren Server hochladen. Dies können Sie entweder über ein FTP-Programm oder direkt über das WordPress-Dashboard tun.

1. FTP-Methode:
   • Verbinden Sie sich mit einem FTP-Client (z.B. FileZilla) mit Ihrem Webserver.
   • Gehen Sie in das Verzeichnis wp-content/uploads/ und erstellen Sie dort einen neuen Ordner namens fonts.
   • Laden Sie die heruntergeladenen Schriftart-Dateien (z.B. .woff, .woff2) in diesen Ordner hoch.
2. WordPress-Dashboard:
   • Gehen Sie zu „Medien“ > „Datei hinzufügen“ und laden Sie die Schriftarten hoch.
   • Erstellen Sie einen Ordner auf Ihrem Webserver, um die Schriftarten zu speichern, und laden Sie die Dateien dorthin.

3. Schritt: CSS für lokale Schriftarten erstellen

Nachdem Sie die Schriftarten auf Ihrem Server gespeichert haben, müssen Sie einen CSS-Code erstellen, der auf diese Schriftarten verweist.

1. CSS-Regeln für die Schriftart einfügen:
   • Gehen Sie in das WordPress-Dashboard und navigieren Sie zu „Design“ > „Customizer“ > „Zusätzliches CSS“.
   • Fügen Sie den folgenden CSS-Code hinzu, wobei Sie den Pfad zu den Schriftarten anpassen:

@font-face {
    font-family: 'Roboto';
    src: url('https://www.ihre-website.de/wp-content/uploads/fonts/roboto.woff2') format('woff2'),
         url('https://www.ihre-website.de/wp-content/uploads/fonts/roboto.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Passen Sie den Pfad zu den Schriftarten (roboto.woff2 und roboto.woff) entsprechend der URL an, in der Sie die Schriftarten gespeichert haben.

2. Schriftart für Ihre gesamte Website anwenden: Um die Schriftart auf der gesamten Website anzuwenden, können Sie folgenden CSS-Code verwenden:

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

Dieser Code sorgt dafür, dass die Schriftart „Roboto“ auf der gesamten Seite verwendet wird.

4. Schritt: Google Fonts in WordPress deaktivieren

Nachdem Sie die Schriftarten lokal eingebunden haben, möchten Sie die Verbindung zu den Google-Servern verhindern, um sicherzustellen, dass keine Daten mehr an Google übermittelt werden.

1. Deaktivieren Sie Google Fonts im Theme: Wenn Sie ein Child-Theme verwenden, können Sie den folgenden Code in die functions.php-Datei einfügen, um die Google Fonts zu deaktivieren:

function remove_google_fonts() {
    wp_dequeue_style( 'google-fonts' );
    wp_deregister_style( 'google-fonts' );
}
add_action( 'wp_enqueue_scripts', 'remove_google_fonts', 20 );

Dieser Code entfernt das Laden von Google Fonts von Ihrer Seite, da die Schriftarten nun lokal eingebunden sind.

2. Verwenden Sie ein Plugin: Falls Sie mit Code nicht vertraut sind, gibt es Plugins wie „Disable Google Fonts“ oder „WP Google Fonts“, die das gleiche Ergebnis erzielen, indem sie das Laden der Google Fonts deaktivieren.

5. Schritt: Testen und Optimieren

Nachdem Sie Google Fonts lokal eingebunden haben, sollten Sie Ihre Website testen, um sicherzustellen, dass alles korrekt funktioniert. Überprüfen Sie, ob die Schriftarten richtig angezeigt werden und ob keine Verbindungen zu Google-Servern bestehen.

• Verwenden Sie die Entwicklertools Ihres Browsers: Öffnen Sie die Entwicklertools in Chrome (Rechtsklick > „Untersuchen“ > „Netzwerk“), um zu sehen, ob Ihre Schriftarten von den Google-Servern geladen werden.
• Google PageSpeed Insights: Überprüfen Sie die Ladegeschwindigkeit Ihrer Seite und stellen Sie sicher, dass sie schneller lädt, da keine externen Schriftarten mehr geladen werden müssen.

Vorteile der lokalen Einbindung von Google Fonts

1. DSGVO-Konformität: Durch das lokale Hosten der Google Fonts vermeiden Sie die problematische Datenübertragung an Google-Server, was die DSGVO-Konformität Ihrer Seite verbessert.
2. Schnellere Ladezeiten: Lokale Schriftarten können schneller geladen werden, was die Benutzererfahrung und die SEO-Performance Ihrer Seite verbessert.
3. Bessere Kontrolle: Sie haben die volle Kontrolle über die Schriftarten und deren Versionen auf Ihrer Website.

Fazit

Das lokale Einbinden von Google Fonts auf einem WordPress-Shop ist eine effektive Methode, um sicherzustellen, dass Ihre Webseite datenschutzkonform ist und gleichzeitig die Benutzererfahrung optimiert wird. Es ist ein einfaches Verfahren, das mit ein wenig technischem Wissen leicht durchgeführt werden kann. Sobald Google Fonts lokal eingebunden sind, sind Sie nicht nur vor möglichen Datenschutzproblemen geschützt, sondern können auch von verbesserten Ladegeschwindigkeiten und einer besseren Kontrolle über das Design Ihrer Webseite profitieren.