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.

Bisher gelesen:

Inhalt

Die Ausgangssituation

Aktuell (im August 2022) läuft in Österreich eine unseriöse Abmahnwelle. Hintergrund ist, dass in einem deutschen (!) Urteil im Frühjahr dieses Jahres festgestellt wurde, dass alleine die Nutzung von Google Fonts nach der (deutschen!) DSGVO einen Verstoß bedeutet kann. 

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 1000 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.

 

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 sichere Abhilfe dagegen ist als kostenloses Plugin erhältlich:

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

Eigentlich sollte man davon ausgehen können, dass Elementor selbst so eine Funktion integriert hat. Und in der Tat 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, nicht aber das Laden der Fonts zu verhindern.

Google Fonts professionell nutzen

Die gute Nachricht an dieser Stelle ist, dass es sehr einfach ist, Google Fonts zu nutzen rechtlich 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 eigne 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. 

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

Fazit

Wie immer sollte man wissen, was man tut. Leider unterstützt uns Elementor nicht von Haus aus ausreichend bei der (nicht) Einbindung von Google Fonts. Es gibt aber gute, kostenfreie Hilfen die man einfach benutzen kann.