Google Fonts lokal in WordPress Elementor einbinden: Ein umfassender Leitfaden

Google Fonts sind eine ausgezeichnete Ressource für Webdesigner und Entwickler, die nach einer Vielzahl von kostenlosen, gut gestalteten Schriftarten suchen, um ihre Websites zu verschönern. Sie bieten eine riesige Auswahl an Schriften, die einfach in jede WordPress-Website integriert werden können, insbesondere mit beliebten Page Buildern wie Elementor.

Jedoch hat die zunehmende Bedeutung der Datenschutz-Grundverordnung (DSGVO) in Europa dazu geführt, dass immer mehr Website-Betreiber auf die Möglichkeit achten müssen, Google Fonts lokal auf ihren Servern zu hosten, anstatt sie von den externen Google-Servern zu laden. Das bedeutet, dass externe Datenaufrufe zu Google Fonts, die den Datenschutzbestimmungen der DSGVO möglicherweise widersprechen, vermieden werden können.

In diesem Blogbeitrag zeigen wir dir, wie du Google Fonts lokal in WordPress mit Elementor einbindest. Dies wird nicht nur helfen, die Datenschutzanforderungen zu erfüllen, sondern auch die Ladegeschwindigkeit deiner Website verbessern.

Warum Google Fonts lokal einbinden?

Zunächst einmal ist es wichtig, zu verstehen, warum das lokale Einbinden von Google Fonts eine bessere Praxis sein kann:

1. DSGVO-Konformität: Das Laden von Google Fonts von den Google-Servern kann gegen die DSGVO verstoßen, da Google beim Laden der Schriftarten personenbezogene Daten von Website-Besuchern sammeln könnte (z. B. IP-Adressen). Um dieser Problematik zu begegnen, ist es ratsam, die Google Fonts lokal zu hosten.
2. Ladegeschwindigkeit: Durch das lokale Hosting von Schriftarten auf deinem Server können die Ladezeiten verbessert werden, da die Schriftarten direkt von deinem Webserver und nicht von einem externen Server geladen werden müssen.
3. Stabilität: Wenn Google Fonts von den Google-Servern geladen wird, kann es vorkommen, dass diese Server vorübergehend nicht erreichbar sind oder die Ladegeschwindigkeit schwankt. Mit lokal gehosteten Schriftarten ist deine Website stabiler, da du die Kontrolle über die Verfügbarkeit hast.

Voraussetzungen

Bevor du beginnst, Google Fonts lokal in Elementor zu integrieren, solltest du sicherstellen, dass du die folgenden Voraussetzungen erfüllst:

• WordPress-Website mit Elementor: Du solltest bereits WordPress und Elementor auf deiner Website installiert haben. Elementor Pro bietet noch mehr Anpassungsoptionen für die Schriftarten, ist aber nicht zwingend erforderlich, um Google Fonts lokal zu hosten.
• FTP-Zugang oder cPanel: Du benötigst Zugang zu den Dateien deiner WordPress-Website, um Schriftarten hochzuladen und die entsprechenden Anpassungen vorzunehmen.
• Schriftart-Dateien: Stelle sicher, dass du die Google Fonts, die du verwenden möchtest, heruntergeladen hast. Wenn du sie von Google herunterlädst, solltest du die Schriftarten in den Formaten WOFF und WOFF2 erhalten, die am besten für das Web geeignet sind.

Schritte zum lokalen Einbinden von Google Fonts in WordPress Elementor

1. Google Fonts herunterladen

Um die Google Fonts lokal zu hosten, musst du die gewünschten Schriftarten zuerst herunterladen. Es gibt mehrere Websites, die dir helfen können, Google Fonts herunterzuladen, aber eine der einfachsten Methoden ist die Website Google Webfonts Helper.

1. Schritt 1: Besuche Google Webfonts Helper.
2. Schritt 2: Wähle die Schriftarten aus, die du verwenden möchtest. Du kannst entweder eine einzelne Schriftart oder mehrere Schriftarten gleichzeitig auswählen.
3. Schritt 3: Wähle die gewünschten Schriftgewichte und -stile aus. Stelle sicher, dass du nur die Varianten auswählst, die du auf deiner Website verwenden wirst, um die Dateigröße zu minimieren.
4. Schritt 4: Klicke auf „Download“ und speichere die Schriftart-Dateien auf deinem Computer. Du solltest sowohl WOFF- als auch WOFF2-Dateien erhalten.

2. Schriftarten auf deinen Server hochladen

Jetzt, wo du die Schriftarten heruntergeladen hast, musst du sie auf deinen Server hochladen.

1. Schritt 1: Melde dich bei deinem Hosting-Provider an und öffne den Datei-Manager (cPanel) oder verwende ein FTP-Programm wie FileZilla.
2. Schritt 2: Gehe zum Ordner „wp-content/themes/ dein-Theme“, vorzugsweise zu einem Ordner wie „fonts“ (falls dieser nicht vorhanden ist, erstelle ihn).
3. Schritt 3: Lade die heruntergeladenen Schriftart-Dateien (WOFF und WOFF2) in diesen Ordner hoch.

3. CSS für die Schriftarten einfügen

Um die Schriftarten auf deiner WordPress-Website verfügbar zu machen, musst du sie in das CSS deiner Website einfügen. Gehe dazu wie folgt vor:

1. Schritt 1: Gehe zu deinem WordPress-Dashboard und navigiere zu „Design“ > „Customizer“ > „Zusätzliches CSS“.
2. Schritt 2: Füge folgenden CSS-Code ein, um die Schriftarten auf deiner Website verfügbar zu machen:

@font-face {
    font-family: 'MeineGoogleFont';
    src: url('https://www.deine-website.de/wp-content/themes/dein-theme/fonts/meine-google-font.woff2') format('woff2'),
         url('https://www.deine-website.de/wp-content/themes/dein-theme/fonts/meine-google-font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Ersetze „MeineGoogleFont“ mit dem Namen deiner Schriftart und die URLs mit den tatsächlichen URLs der Schriftart-Dateien auf deinem Server.

4. Schriftart in Elementor verwenden

Nachdem du die Schriftart erfolgreich hinzugefügt hast, kannst du sie jetzt in Elementor verwenden.

1. Schritt 1: Gehe zu einem Elementor-Editor und wähle ein Text-Widget (z. B. Überschrift oder Textblock).
2. Schritt 2: Klicke auf die „Stile“-Optionen des Widgets.
3. Schritt 3: Wähle unter „Schriftart“ die neu hinzugefügte Schriftart aus (sie sollte nun im Dropdown-Menü erscheinen).
4. Schritt 4: Speichere deine Änderungen.

Jetzt wird deine benutzerdefinierte Schriftart auf deiner Website angezeigt, ohne dass sie von externen Servern geladen werden muss.

5. Google Fonts in Elementor Pro einbinden

Wenn du Elementor Pro verwendest, kannst du eigene Schriftarten noch schneller einbinden. Elementor Pro bietet eine benutzerfreundliche Schnittstelle zum Hinzufügen von benutzerdefinierten Schriftarten:

1. Schritt 1: Gehe zu „Elementor“ > „Benutzerdefinierte Schriftarten“ im WordPress-Dashboard.
2. Schritt 2: Klicke auf „Neue Schriftart hinzufügen“ und gib deiner Schriftart einen Namen.
3. Schritt 3: Lade die Schriftart-Dateien (WOFF und WOFF2) hoch und wähle die entsprechenden Schriftgewichte aus.
4. Schritt 4: Klicke auf „Veröffentlichen“.

Jetzt kannst du deine benutzerdefinierte Schriftart in jedem Elementor-Widget verwenden, indem du sie aus dem Dropdown-Menü der Schriftarten auswählst.

Vorteile des lokalen Einbindens von Google Fonts in Elementor

1. DSGVO-Konformität: Wie bereits erwähnt, wird die DSGVO durch das lokale Hosting von Google Fonts eingehalten, da keine persönlichen Daten an Google übertragen werden.
2. Schnellere Ladegeschwindigkeit: Lokales Hosting reduziert die Ladezeit, da die Schriftarten direkt von deinem Server geladen werden, anstatt von einem externen Server.
3. Stabilität: Deine Website ist weniger anfällig für Probleme, die durch Google-Server-Ausfälle oder Verzögerungen beim Laden von externen Schriftarten entstehen können.

Fazit

Das lokale Einbinden von Google Fonts in WordPress mit Elementor ist eine großartige Möglichkeit, deine Website DSGVO-konform zu gestalten und gleichzeitig die Ladegeschwindigkeit und Stabilität zu verbessern. Es gibt verschiedene Methoden, um dies zu erreichen – vom manuellen Hochladen der Schriftarten bis hin zur Verwendung der benutzerdefinierten Schriftarten-Funktion von Elementor Pro.

Indem du deine Schriftarten lokal auf deinem Server speicherst, kannst du sicherstellen, dass deine Website sowohl datenschutzkonform als auch schnell und zuverlässig bleibt. Probier es aus und verbessere das Design deiner Website auf einfache Weise!