Font Settings in Elementor

Wer Elementor Pro Out of the Box verwendet und sich nicht näher mit den Font-Settings beschäftigt wird unnötig viele Dateien auf seinem Webserver haben - die regelmäßig Ressourcen fressen. Auch ein konsistentes Webdesign mit einer zentralen Stelle für alle Einstellungen wird schwer möglich sein.

An folgenden 5 Stellen können Einstellungen getroffen werden, die Auswirkungen auf die Typographie einer Website haben:

können wir das Aussehen ändern und ausserdem auch Verhalten, in dem Beispiel die Ausrichtung. Hat man keinerlei Einstellungen getroffen wirkt die Voreinstellung von Elementor, die der Überschrift den Globalen Schriftstil Primär zugeordnet hat.

Stellen wir uns jetzt hingegen eine HTML-Seite ohne WordPress und ohne Elementor vor, einfach ein paar Zeilen HTML-Code wie man sie aus den Anfängen des Webs kennt:

Hier drinnen stehen 2 HTML-Tags (h1 und p), und weil nichts anderes definiert ist, sorgt der Browser mit seinen Grundeinstellungen dafür, dass die Überschrift und der Text eben irgendwie aussehen. Die Schriftgröße für normalen Text beträgt übrigens 16 px (oder auch 1 em oder 1 rem).

Grundsätzlich gibt es nun 2 Wege, diese Grundeinstellungen für meine Zwecke anzupassen:

Einerseits kann ich Einstellungen treffen, welche das Aussehen von den Tags p, h1, etc. verändern. Und genau das macht man wenn man in Elementor Veränderungen unter

vornimmt. Daher sind auch genau dort die Grundeinstellungen für den Body(text), die Links und die 6 Überschriften zu finden.

Der zweite Weg eine Änderung durchzuführen ist es, einem bestimmten Teil einer Webseite (also zB einer Überschrift auf einer Seite) einen Stil über das Widget zuzuweisen. Dieser gilt dann nur für diese eine Überschrift. Und weil diese Zuweisung näher am Inhalt (also an den Buchstaben der Überschrift) im Code steht hat diese Priorität gegenüber den Anweisungen, die weiter weg stehen.

Das Ganze baut aufeinander auf: so kann zB. eine Schriftfamilie in den Grundeinstellungen für den Body gesetzt werden, in der Anweisung für einen Globalen Stil kann ich auf die Angabe einer Schriftfamilie verzichten (=Vorgabe) und zB. nur die Größe einstellen.

Es gilt: je weniger Einstellungen umso besser! Am besten ist es nur die notwendigen und nie die möglichen Optionen zu setzen.

Daher versucht man die Angaben, die über die Grundeinstellungen hinausgehen möglichst in Globalen Schriften zu organisieren. Damit hat man eine zentrale Stelle für alle Schriften, die man auf einer Website verwenden will. Nur im Einzelfall ist es dann noch notwendig, eine einzelne Einstellung im Stil-Tab eines Widgets zu verändern.

Trifft man nun Schrifteneinstellungen in einem Theme kommt es auf die Qualität des Theme-Autors an, wie diese organisiert sind und wo dieser Einstellungen dann wirken. Genau (auch) deswegen lautet meine klare Empfehlung kein Theme zu verwenden, das hier nicht eindeutig nachvollziehbare Ergebnisse liefert - daher Hello Elementor verwenden!

Unter

Elementor verwendet von Haus aus Google Fonts. Das funktioniert gut, kostet nichts (ausser ein wenig Privatsphäre) und schaut auch gut aus. Um die Vorteile von Google Fonts zu nutzen muss man diese nur DSGVO-konform anwenden.

Es gibt 2 Wege, wie man diese kostenlosen Schriften in einer Website einbinden kann: entweder direkt über den Google-Font-Server oder über den eigenen Webserver. Kurz: auch die Einbindung über den Google-Server ist in Europa legal - so ferne der User mit der Nutzung einverstanden ist. (Consent). Dieses Einverständnis muss aber explizit erfolgen (ja, ich bin einverstanden, dass ... ) und vor allem muss dieses Einverständnis vor dem Aufruf des Font-Servers erfolgen. Und das ist technisch gar nicht so einfach umzusetzen. Wer das will sollte sich unbedingt den Marktführer Borlabs Cookie-Plugin anschauen, damit kann man das rechtskonform umsetzen.

Der zweite Weg besteht darin, Kopien der verwendeten Schiften auf den eigenen Webserver zu kopieren und diese dann einzubinden, das ist mit Elementor hervorragend lösbar.

Weil das aber ein wenig umständlich ist hat Elementor eine Funktion eingeführt, die das automatisch erledigt - leider. Denn wie so oft: was bequem ist, frisst unnötig Ressourcen.

Der Reihe nach:

Hier stellt man ein, ob Elementor Google Fonts anbieten soll (in allen Typographie-Einstellungen) oder nicht.

Ist diese Option aktiviert findet man darunter die Option

die default auf tauschen (swap) gestellt ist. Das passt so, ist aber unerheblich wenn man seine Website ordentlich aufbaut.

Unter

ist nun eine (noch Beta) Option angekommen die dafür sorgt, dass - sobald ein Google Font ausgewählt wird - dieser als Kopie am eigenen Webhost gespeichert und von dort eingebunden wird. Damit ist die Einbindung auch nach DSGVO in Ordnung.

Gut, oder? Naja, stellen wir uns einen typischen Anwender vor, der einfach ausprobiert, welche Schrift gefällt. Nach 3 oder 4 Versuchen findet er vielleicht sogar die richtige Schrift, vielleicht dauert es länger. Am nächsten Tag das Ganze nochmal.

Die Einstellung auf inaktiv zu setzen. Sollte diese Option in Zukunft aus den Eigenschaften (beta) in den Tab Leistungen (final) überführt werden dann eben dort ausschalten. Professionelles Webdesign verträgt sich nicht mit dieser Umsetzung.

Ausserdem kann man auch unter

diese Option auf deaktivieren stellen. Damit ist man DSGVO-konform, braucht aber trotzdem nicht auf Google-Fonts zu verzichten! Im Augenblick (Juni 2025) gibt es 1835 Schriften und sehr viele davon sind auch sehr gut, ausserdem sind diese kostenlos und legal zu verwenden.

Wie das geht wurde mehrfach in diesem Blog beschrieben (zb. unter Schriften mit Elementor verwenden), hier nochmal die Kurzfassung:

Elementor bietet hier 4 sog. System Stile an. Diese kann man zwar umbenennen, aber nicht löschen. Elementor verwendet diese Stile in verschiedenen Widgets. Leider ist aber nie ganz klar, welcher Stil wo angewandt wird, um es herauszufinden benötigt man oft eine Versuchs- und Irrtumreihe. Die Empfehlung lautet daher, diese Stile (Primär, Sekundär, Text und Accent) nicht zu verwenden. Statt dessen baut man sich alle Stile komplett selber und doppelt (zur Sicherheit) diese Einstellungen mit diesen 4 System Stilen.