Auch wenn es vielleicht verlockend sein mag, schnell und einfach auf eine der über 1.400 Google Fonts in Elementor zurückzugreifen, so sollte dies nach Möglichkeit vermieden werden. Dies wirkt sich dabei nämlich nicht nur negativ auf die Geschwindigkeit ihrer Website aus, sondern ist ebenfalls auch nicht datenschutzkonform (Urteil des LG München I). Die Best Practice in diesem Fall ist die lokale Einbindung Ihrer Google Schriftarten per Elementor.
1. Schritt: Website überprüfen
Sie sind sich unsicher, ob überhaupt Fonts von den Google Servern nachgeladen werden? Dann nutzen Sie zuerst einen Google Fonts Checker, wie beispielsweise den von Sicher3. Das Tool prüft dabei, ob Schriftarten von den Google Servern nachgeladen werden oder ob diese bereits lokal gespeichert sind. Falls eine Verbindung, zu den Google Servern festgestellt werden konnte, erhalten Sie eine Auflistung, welche Fonts betroffen sind.
2. Schritt: Google Fonts herunterladen
Nachdem Sie nun wissen, welche Fonts überhaupt lokal einzubinden sind, kommt es im nächsten Schritt dazu diese herunterzuladen.
Alternative 1: Google Fonts
Eine Möglichkeit Google Fonts herunterzuladen ist natürlich über Googles eigene Seite Google Fonts. Dabei gibt man zuerst in das Suchfeld oben Links die gewünschte Schriftart ein. Danach kann man entweder direkt die Schriftfamilie downloaden oder noch auswählen, welche Schriftstärken und Arten man dabei haben will oder nicht.
- In dem Suchfeld Search Font Schriftart suchen
- Gewünschte Schriftart anklicken
- Direkt Download Family anklicken oder erst mittels Select/Remove Schriftstärken hinzufügen oder entfernen
Man bekommt dabei einen Ordner der Schriftart in dem Format TTF.
Alternative 2: Google Webfonts Helper (Empfohlen)
Eine weitere Möglichkeit ihren Wunsch-Font zu downloaden bietet der Google Webfonts Helper von Mario Ranftl. Der Vorgang ist dabei ähnlich zu Google Fonts. Hierbei geben Sie in einem ersten Schritt in dem Suchfeld oben Links ihr Font ein und klicken diesen anschließend an. Unter 1. Select charsets können Sie die Voreinstellungen übernehmen. Bei 2. Select styles suchen Sie aus, welche Schriftstärke und welchen Schrifttyp sie später auf Ihrer Website einbinden wollen. Sofern Sie sich unsicher sind, können auch alle Optionen ausgewählt werden. Falls Sie in Zukunft nämlich merken, dass sie eine gewisse Schriftstärke nicht benötigen, so kann diese einfach gelöscht werden. Unter 3. Copy CSS können Sie ebenfalls die Voreinstellung übernehmen. Nun klicken sie einfach noch bei 4. Download files den blauen Button um Ihre Schriftart zu erhalten.
- In dem Suchfeld 1548 fonts by family Schriftart suchen
- Gewünschte Schriftart anklicken
- Unter 3. Copy CSS gewünschte Schriftstärken wählen
- Unter 4. Download files Datei downloaden
Sie erhalten ihre Schriftart (falls unter 3. Copy CSS nicht anderes gewählt wurde) in dem Format woff2. Dies gilt dabei als die Datei, welche vor allem von modernen Browsern genutzt wird und zu empfehlen ist.
3. Schritt: Schriftarten formatieren (Optional)
Falls Sie ein bestimmtes Format einer Schriftart oder sogar alle Formate in ihre WordPress Website einbinden wollen, so können Sie dies einfach per Transfonter tun. Dabei laden Sie in einem ersten Schritt ihre gewünschte Schriftart per Add Fonts hoch und wählen die gewünschten Formate aus. Danach klicken Sie auf Convert dann Download, um Ihre Schriftart in den gewünschten Formaten als Datei zu erhalten.
- Unter Add fonts Datei aus Schritt 2 hochladen
- Unter Formats die gewünschten Formate anklicken
- Auf Convert klicken und kurz warten
- Auf Download klicken, um Ihre Dateien zu erhalten
4. Schritt: Schriftarten in Elementor einbinden
Nachdem Sie nun ihren Fonts im gewünschten Format und Schriftstärke als Datei haben, kommt es im vorletzten Schritt dazu diese per Elementor lokal einzubinden. Dazu hovern Sie zuerst über Elementor links in ihrer Admin-Bar. Klicken Sie dann auf Benutzerdefinierte Schriftarten, um zum Upload zu gelangen.
Klicken Sie danach oben auf Add New und geben Sie auf der nächsten Seite unter Schriftfamilie, den Namen Ihres Fonts ein.
Jetzt laden Sie in dem jeweiligen Format ihren Font hoch und wählen Sie die passende Schriftstärke und Stil. Bevor Sie unter Schriftart Variante Hinzufügen eine neue Variante hochladen, sollten Sie stets kontrollieren, ob die passende Schriftstärke und Stil gewählt wurde!
5. Schritt: Nachladen von Google Fonts deaktivieren
Um schlussendlich noch zu verhindern, dass die Fonts von den Google Servern nachgeladen werden, sollte diese Funktion deaktiviert werden. Dabei haben Sie mehrere Möglichkeiten.
Alternative 1: Per Elementor (Empfohlen)
Seit der Version 3.10 bietet Elementor nun die Möglichkeit, direkt per Elementor Google Fonts zu deaktivieren. Hovern Sie dafür über Elementor und klicken auf Einstellungen. Danach wählen Sie unter dem Reiter Erweitert die Einstellung Google Fonts aus und klicken auf Deaktivieren. Speichern Sie danach Ihre Einstellungen über Änderungen speichern.
Alternative 2: Per Code-Snippet
Eine weite Möglichkeit ist die Eingabe eines Code-Snippets in Ihre functions.php Datei. Hierbei sei jedoch gesagt, dass ein Eingriff auch immer mit einem gewissen Risiko verbunden ist.
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
Alternative 3: Per Plugin
In typischer WordPress Manier gibt es auch spezielle Plugins wie Disable and Remove Google Fonts oder Clearfy, welche das Nachladen von Google Fonts deaktivieren können. Jedoch muss bedenkt werden, dass jedes Plugin Ihre Seite potenziell langsamer werden lässt und ein erhöhtes Sicherheitsrisiko für Angriffe entstehen kann. Haben Sie die Möglichkeit diese Funktion auch per Elementor vorzunehmen, so würde ich empfehlen dies auch zu tun.
Fazit:
Die lokale Einbindung von Google Fonts in Ihre WordPress Website ist kein Hexenwerk, wobei jedoch der Vorgang je nach Anzahl der Schriftarten etwas länger dauern kann. Jedoch lohnt es sich, diese Arbeit zu verrichten. Nicht nur, dass Ihre Website dadurch datenschutzkonform wird, sondern auch, dass die Geschwindigkeit im besten Fall positiv beeinflusst wird.
