Google Web Fonts richtig in WordPress einbinden

Die Wahl der richtigen Schriftart ist ein entscheidender Faktor für das Erscheinungsbild einer Website. Sie beeinflusst nicht nur die Lesbarkeit und Benutzerfreundlichkeit, sondern trägt auch maßgeblich zur Markenidentität bei. Google Fonts bietet eine riesige Auswahl an kostenlosen Schriftarten, die sich einfach in WordPress integrieren lassen. Doch wie geht man dabei richtig vor, um die Performance der Seite nicht zu beeinträchtigen und datenschutzrechtliche Aspekte zu berücksichtigen?

Warum Google Fonts nutzen?

Google Fonts bietet zahlreiche Vorteile:

• Große Auswahl: Zugriff auf hunderte von kostenlosen, hochwertigen Schriftarten.
• Einfache Integration: Leicht in WordPress einbindbar.
• Plattformübergreifend: Funktioniert auf allen modernen Browsern und Geräten.
• Performance-Optimiert: Google hostet die Schriftarten auf schnellen Servern.

Trotz dieser Vorteile ist es wichtig, die Einbindung korrekt vorzunehmen, um Probleme mit der Ladezeit und dem Datenschutz zu vermeiden.

Die datenschutzrechtliche Problematik

Die direkte Einbindung von Google Fonts über die Google-Server birgt datenschutzrechtliche Risiken. Bei jedem Seitenaufruf wird die IP-Adresse des Besuchers an Google übermittelt. Dies verstößt gegen die Datenschutz-Grundverordnung (DSGVO), da keine aktive Einwilligung des Nutzers vorliegt.

Es ist daher ratsam, Google Fonts lokal auf dem eigenen Server zu hosten, um die Kontrolle über die Daten zu behalten und DSGVO-konform zu handeln.

Lokale Einbindung von Google Fonts: Schritt für Schritt

Die lokale Einbindung von Google Fonts ist die sicherste und datenschutzfreundlichste Methode. Hier ist eine detaillierte Anleitung:

1. Schriftarten auswählen und herunterladen: Besuchen Sie die Google Fonts Website (fonts.google.com) und wählen Sie die gewünschten Schriftarten und Schriftschnitte aus. Laden Sie die Schriftarten als ZIP-Datei herunter.
2. Schriftdateien entpacken: Entpacken Sie die heruntergeladene ZIP-Datei auf Ihrem Computer.
3. Schriftdateien in WordPress hochladen: Erstellen Sie im WordPress-Verzeichnis `wp-content` einen neuen Ordner namens `fonts`. Laden Sie die entpackten Schriftdateien (TTF, OTF, WOFF, WOFF2) in diesen Ordner hoch. Sie können dies entweder über einen FTP-Client oder über den Datei-Manager Ihres Webhostings tun.
4. CSS-Code erstellen: Erstellen Sie in Ihrem Theme-Ordner oder in einem benutzerdefinierten CSS-Plugin eine neue CSS-Datei (z.B. `fonts.css`). Fügen Sie den folgenden Code für jede Schriftart hinzu und passen Sie die Pfade zu den Schriftdateien an:

@font-face {
    font-family: 'IhreSchriftart';
    src: url('../wp-content/fonts/IhreSchriftart-Regular.woff2') format('woff2'),
         url('../wp-content/fonts/IhreSchriftart-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IhreSchriftart';
    src: url('../wp-content/fonts/IhreSchriftart-Bold.woff2') format('woff2'),
         url('../wp-content/fonts/IhreSchriftart-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
  

Ersetzen Sie `’IhreSchriftart’` mit dem Namen der Schriftart und passen Sie die Pfade zu den Schriftdateien entsprechend an. Achten Sie darauf, die richtigen Dateinamen und Formate (WOFF2 und WOFF sind empfehlenswert) zu verwenden.

5. CSS-Datei in WordPress einbinden: Fügen Sie die CSS-Datei in Ihrem WordPress-Theme ein. Sie können dies entweder in der `functions.php` Datei Ihres Themes oder über ein Plugin tun. Hier ist ein Beispiel für die Einbindung in der `functions.php` Datei:

function lade_eigene_fonts() {
    wp_enqueue_style( 'eigene-fonts', get_stylesheet_directory_uri() . '/fonts.css' );
}
add_action( 'wp_enqueue_scripts', 'lade_eigene_fonts' );
  

6. Schriftarten in CSS verwenden: Verwenden Sie die Schriftarten in Ihrem CSS-Code, indem Sie die `font-family` Eigenschaft setzen:

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

Ersetzen Sie `’IhreSchriftart’` mit dem Namen der Schriftart, die Sie in der `@font-face` Deklaration definiert haben.

Google Fonts Plugins: Vor- und Nachteile

Es gibt zahlreiche WordPress-Plugins, die die Einbindung von Google Fonts vereinfachen sollen. Einige der beliebtesten sind:

• Easy Google Fonts: Ermöglicht die einfache Auswahl und Anpassung von Google Fonts direkt im WordPress Customizer.
• Use Any Font: Ermöglicht das Hochladen und Verwenden eigener Schriftarten, einschließlich Google Fonts.
• OMGF | Optimize My Google Fonts: Optimiert die Google Fonts-Nutzung und hostet sie lokal.

Vorteile von Google Fonts Plugins:

• Einfache Bedienung und Konfiguration.
• Oftmals zusätzliche Funktionen wie Schriftarten-Optimierung.
• Zeitersparnis bei der Einrichtung.

Nachteile von Google Fonts Plugins:

• Abhängigkeit von Drittanbieter-Code.
• Mögliche Performance-Einbußen durch zusätzliche Plugin-Last.
• Nicht alle Plugins sind DSGVO-konform (achten Sie auf die Möglichkeit der lokalen Speicherung).

Wenn Sie ein Plugin verwenden, stellen Sie sicher, dass es die Möglichkeit bietet, die Schriftarten lokal zu hosten und dass es regelmäßig aktualisiert wird, um Sicherheitslücken zu vermeiden.

Performance-Optimierung bei der Nutzung von Google Fonts

Auch bei der lokalen Einbindung von Google Fonts gibt es Möglichkeiten, die Performance weiter zu optimieren:

• Nur benötigte Schriftschnitte verwenden: Laden Sie nur die Schriftschnitte herunter, die Sie tatsächlich benötigen (z.B. Regular, Bold, Italic).
• WOFF2-Format bevorzugen: WOFF2 ist das modernste und effizienteste Schriftformat. Verwenden Sie es, wenn möglich.
• Font-Display:swap verwenden: Die `font-display: swap;` Eigenschaft sorgt dafür, dass der Text sofort sichtbar ist, auch wenn die Schriftart noch nicht geladen ist. Dies verbessert das Nutzererlebnis.
• Schriftarten vorladen (preload): Verwenden Sie das `preload` Attribut im HTML-Header, um die Schriftarten frühzeitig zu laden:

<link rel="preload" href="/wp-content/fonts/IhreSchriftart-Regular.woff2" as="font" type="font/woff2" crossorigin>
  

Fügen Sie diesen Code für jede Schriftart und jeden Schriftschnitt, den Sie verwenden, in den `<head>` Bereich Ihrer Website ein. Sie können dies entweder manuell in der `header.php` Datei Ihres Themes oder über ein Plugin tun.

Google Fonts und Core Web Vitals

Die Art und Weise, wie Sie Google Fonts einbinden, kann sich auf die Core Web Vitals Ihrer Website auswirken. Insbesondere der Largest Contentful Paint (LCP) kann durch das Laden von Schriftarten beeinflusst werden. Durch die lokale Einbindung, die Verwendung von `font-display: swap;` und das Vorladen der Schriftarten können Sie die Ladezeit der Schriftarten optimieren und somit den LCP verbessern.

Fazit

Die Einbindung von Google Fonts in WordPress kann die Gestaltung Ihrer Website erheblich verbessern. Es ist jedoch wichtig, die datenschutzrechtlichen Aspekte zu berücksichtigen und die Einbindung korrekt vorzunehmen, um die Performance der Seite nicht zu beeinträchtigen. Die lokale Einbindung ist die sicherste und empfehlenswerteste Methode. Achten Sie auf die Optimierung der Schriftarten, um die Ladezeit zu minimieren und ein optimales Nutzererlebnis zu gewährleisten.

Indem Sie diese Richtlinien befolgen, können Sie Google Fonts effektiv und datenschutzkonform in Ihre WordPress-Website integrieren.