Google Fonts mit Elementor

Google Fonts mit Elementor

tl;dr: Google Fonts und Elementor sind Freunde – zu gute Freunde für manche. Wie man Google Fonts und Elementor gemeinsam nutzen kann – oder eben nicht – steht in diesem Artikel. Update: Seit Version 3.10 Von Elementor kann man die Google-Font Einbindung mit einem Klick deaktivieren!
Hinweis: es gibt einen aktuellen (Juni 2025) Artikel über Font Settings in Elementor.

Die Ausgangssituation

Im Unterschied zu anderen Google Services wie zB Google Maps, dass via API eingebunden werden muss oder auch Google reCaptcha, für dessen Verwendung man sich registrieren und ein Schlüsselpaar einbinden muss erfolgt die Einbindung von Google Fonts ohne gesonderte Registrierung. Google stellt einfach über 1400 Schriften auf seinen Font-Servern zur Verfügung. Und die stehen eben auch in den USA, und zur Nutzung wird die IP-Nummer übermittelt (geht auch nicht anders). Es ist also ganz unabhängig davon, ob Google aus der Nutzung dieses Services Daten gewinnt oder nicht für die Europäischen Staaten mit ihren 27 Datenschutzgrundverordnungen problematisch. 

Elementor- freie Version

In diesem ersten Beispiel wird bei einer Überschrift die Schriftart Amarante ausgewählt. Es mag aufgrund der großen Anzahl der Schriften ein wenig untergehen, aber schon im Popup bei der Schriftenauswahl wird klar darauf hingewiesen, dass hier die Google-Fonts verwendet werden.
Elementor Google Fonts Menu
Google Font Amarante
Auch in der kostenlosen Elementor-Version kann man auf die umfangreiche Schriftensammlung der Google Fonts zugreifen.
Google Fonts APIs
Der Quellcode zeigt das Offensichtliche: die Schrift wird von einem Server Namens fonts.googleapis.com geladen.

Das ist gut und in Ordnung so, immerhin kann man hier aus einer wirklich guten und großen Sammlung auswählen. Der Zugriff auf diese Server erfolgt sehr schnell, die Schriften werden in Zwischenspeichern bereit gehalten. 

Was aber, wenn man das nicht will? Die einfachste Möglichkeit ist natürlich, einfach bei der Schriftauswahl keine Google Fonts zu verwenden. Aber Vorsicht! Wer sich aus der Elementor Bibliothek bedient denkt vielleicht gar nicht daran, dass in einem Template oder Widget ein Google Font verwendet wird. Es könnte also vorkommen, dass man diesen Service benutzt ohne es zu merken.

Eine Abhilfe dagegen ist seit Version 3.10 nun in Elementor integriert: unter

Dashboard > Elementor > Einstellungen > Erweiterungen > Google Fonts

kann man nun dieses Font-Einbindung ausschalten. Wichtig: das funktioniert auf der Ebene des Elementor! Eventuell benutzt man ein Theme, dass an anderer Stelle Fonts extern einbindet. 

Dekativierten Google Fonts
Man kann die Google-Font-Einbindung in Elementor einfach abschalten,

Sollte man nicht sicher sein, ob man nun Google Fonts einbindet gibt es eine Reihe externer Tools zum Testen, zB: den Google Fonts Checker auf Sicher3. 

Sollte das einfache Deaktivieren der Einbindung scheitern kann man versuchen mittels Plugin zu arbeiten.

Disable and Remove Google Fonts

Dieses Plugin macht genau das, wie es auch heisst: es verhindert und entfernt die Einbindung von Google Fonts. 
Disable and Remove Google Fonts
Das Plugin verhindert die Einbindung der Google Fonts auch in Elementor.
In der Plugin-Beschreibung wird ausdrücklich darauf hingewiesen, dass es auch Elementor unterstützt wird.  Der Praxistest beweist es: obwohl bei der Bearbeitung mit Elementor der Font noch zur Auswahl bereit steht, wird er in der Seitenansicht nicht mehr geladen. 
Das Plugin verhindert, dass der Google-Server kontaktiert wird. Damit wird die Schrift nicht mehr wie eingestellt dargestellt.

Die Elementor Google Fonts Einstellungen

Wenn man Die Google-Font-Einbindung aktiviert hat gibt es unter  

Dashboard > Elementor > Erweitert 

eine Funktion, die leider Google Fonts Laden heist. Im Erklärungstext dazu steht:

Die Eigenschaft Font-display legt fest, wie Schriftdateien vom Browser geladen und angezeigt werden. Lege die Art und Weise fest, wie Google Fonts geladen werden, indem du die Eigenschaft "font-display" auswählst (Standard: Auto).

Das Schlüsselwort hier lautet Font-display. Man kann hier einstellen wie, und nicht ob Google Fonts geladen werden (hier der Erklärung von der Elementor Seite):

  • Vorgabe / Default – The font display strategy is defined by the browser.
  • Blockierung / Blocking – Hides the text until the font has fully loaded.
  • Tauschen / Swap – Use a fallback-font to display, until the font has fully loaded.
  • Ersatzbild / Fallback – Hides the text for a minimal period and will use the font only if loaded within a few seconds.
  • Optional – Hides the text for a minimal period and will use the fallback-font unless the font is already fully loaded.
Elementor Google Font Optionen
Die Einstellung erlauben die Lademethode zu wählen so ferne die Einbindung von Google Fonts aktiviert ist,

Google Fonts professionell nutzen

Die gute Nachricht an dieser Stelle ist, dass es sehr einfach ist, Google Fonts zu nutzen ohne rechtliche Probleme mit unseriösen Anwaltskanzleien zu bekommen. Dazu benötigt man 2 Dinge:

  1. Eine Elementor Pro Lizenz
  2. Ein wenig Know-How, dass hier steht.

Die Lösung besteht darin, die Google Fonts lokal einzubinden.  Unter:

Dashboard > Elementor > Benutzerdefinierte Schriftarten

kann man eigene Schriften auf den eigenen Webhost laden und einbinden, damit umgeht man (natürlich nur, wenn der Webserver innerhalb der EU steht) alle rechtlichen Probleme und hat auch den Vorteil der vollen Kontrolle. Einen spürbaren Geschwindigkeitsvorteil wird es wohl nur in wenigen Fällen geben.

Google erlaubt die lokale Einbindung (also das Herunterladen der Schriften) von seinen Servern. Und natürlich hat sich schon jemand (vielen Dank dafür!) Gedanken gemacht, wie man das bequem erledigen kann: der Google Webfont Helper hilft. 

linkGoogle Webfonts Helper

Eine genauere Erklärung wie das funktioniert und noch viel mehr über Schriften mit Elementor gibt es in einem eigenen Artikel hier. 

FAQs

Fazit

Wie immer sollte man wissen, was man tut. Endlich hilft uns Elementor  von Haus bei der (nicht-) Einbindung von Google Fonts. Zusätzlich gibt es gute, kostenfreie Plugins die die Einbindung verhindern oder aber auch die Fonts automatisch auf den eignen Server kopieren. Zum Check gibt es Online-Dienste die abgefragt werden können.

Veröffentlicht am: 21. August 2022
Letztes Update am: 15. August 2026

2 Kommentare

Hinterlasse deinen Kommentar