tl;dr: Elementor hat die Einstellungen für Schriften erweitert. In diesem Beitrag werfen wir einen Blick darauf, wo was einzustellen ist, und welche Auswirkungen das auf die Website hat: was wird woher geladen und wie schaut es dann aus? Der Artikel wurde unter Elementor Pro 3.29.2 und dem Theme Hello Elementor 3.4.3 verfasst.
Eigentlich sollte es nach Jahren der Entwicklung einen klaren Leitfaden geben, welche Einstellungen man wie vorzunehmen hat damit das beste Ergebnis erreicht wird. Leider verhindern 3 Dinge ein einfaches „Kochrezept“:
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:
Damit man wirklich versteht, wie die hier getroffenen Einstellungen wirken, muss man sich ein wenig mit den Grundlagen von CSS und HTML auseinandersetzen: nicht mit dem Code, sondern wie die Dingen miteinander wirken!
Webdesign beginnt links oben und verläuft von aussen nach innen. Egal was noch so moderne Designtools für Features bieten: am Ende eines Designprozesses muss immer gültiges HTML rauskommen das im Normalfall mit CSS gestaltet wird und manchmal mit Javascript erweitert. Weil dich das nicht wirklich interessiert hast du dich vermutlich für Elementor Pro entschieden. Von Aussen nach Innen ist der entscheidende Punkt wenn es um Schrifteinstellungen geht. Stellen wir uns eine Überschrift auf eine Seite vor. Über den Tab Stil
Panel > Überschrift bearbeiten | Stil
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:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
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
Panel > Website-Einstellungen > Typographie
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
Dashbord > Elementor > Einstellungen | Generell | Standardschriftarten deaktivieren
lautet die Erklärung:
Die Auswahl deaktiviert die Einstellungen für Standardschriftarten in Elementor und verwendet statt dessen die Schriftarten des Themes.
Was so in etwa die missverständlichste Formulierung ist, die man für so eine Einstellung treffen kann. Kurz: die Option ist anzuhaken! Denn dann wirken jene Einstellungen, die man in den Website-Einstellungen unter Typographie gesetzt hat.
Das kann man selber leicht ausprobieren:
Dazu muss man nur unter
Panel > Website-Einstellungen > Typographie
Die Schriftfamilie ändern für zB. die H2.
Danach kann man eine Testseite anlegen und dort eine Überschrift H2 platzieren.
Ist also die Option gesetzt hat man den ersten Schritt zu einer vollständigen Kontrolle über die typographische Erscheinung der Website geschafft. Ein Klick genügt.
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:
Dashboard > Elementor > Erweitert | Google Fonts
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
… Google Fonts laden
die default auf tauschen (swap) gestellt ist. Das passt so, ist aber unerheblich wenn man seine Website ordentlich aufbaut.
Unter
Dashboard > Elementor > Eigenschaften | Stabile Merkmale | Google Fonts lokal laden
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.
Im WordPress-Verzeichnis unter
… uploads > elementor > google-fonts > fonts
werden die einzelnen Schriftdateien im woff2-Format individualisiert (Filenamen) abgespeichert. Daneben gibt es unter
… uploads > elementor > google-fonts > css
für jede ausgewählte Schrift noch eine CSS-Datei die per absolutem Pfad auf die jeweilige Schriftdatei referenziert.
Die Empfehlung lautet daher, unter
Dashboard > Elementor > Eigenschaften | Stabile Merkmale | Google Fonts lokal laden
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
Dashboard > Elementor > Erweitert | Google Fonts
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:
Hat man nun seine persönlichen Schriften am eigenen Webserver installiert geht es darum die grundsätzlichen Einstellungen vorzunehmen.
Also: Welchen Font hat die Website und wie groß soll die Schrift sein? Dazu stellt man unter
Panel > Website-Einstellungen > Typographie | Body
die gewünschte Schriftfamile und die passende Größe ein (die Einheit REM ist dein Freund!).
Darunter findet man die Einstellungen für Links, hier sollte nur eingestellt werden ob Links Unterstrichen werden oder nicht (Typograhie > Auszeichnung > Unterstreichen). Eine Angabe von Schrift und Größe wird hier eher hinderlich sein, da Links in verschiedenen Größen und Schriften auftauchen werden (Verlinkte Überschriften, Textlinks, Menüs, etc.). Mehr Angaben hier führen also eher zu weniger Klarheit.
Die Überschriften H1 bis H6 sind ebenfalls zu konfigurieren, wobei die Schriftfamilie nur dann einzustellen ist, wenn sie sich von der im Body eingestellten Schrift unterscheiden soll, sonst ist Vorgabe die richtige Option. Bei dieser Gelegenheit: die Umwandlung von Text in Großbuchstaben ist eigentlich immer falsch. Punkt.
Ist alles andere eingestellt kann man nun an Definition der Globalen Schriften gehen. Das ist der letzte Schritt bei den Typo-Einstellungen, denn:
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.
Beispiel: Wir wollen, dass der Fliesstext so wie in den Typographie-Einstellungen für Body aussieht.
Diesen Stil lege ich mir als Individuelle Schrift an, zB. mit dem Namen Lauftext. Hier stelle ich Schriftfamile, Schriftgröße und Zeilenhöhe ein (und zwar genau so, wie ich die Einstellungen für die Typographie im Body gemacht habe.) Genau die selben Einstellungen treffe ich auch für die System-Schrift Text.
Damit ist es völlig egal, ob ein Text auf der Website keine Schriftzuordnung hat, das Widget den Sytem-Stil verwendet oder ich über die Einstellungen im Widget den Globalen Stil Lauftext auswähle: es wird immer gleich aussehen. Damit bin ich als Webdesigner auf der sicheren Seite.
Analog dazu gehe ich für die System-Stile Primär (H1) und Sekundär (H2) vor. Beim System Stil Accent kommt oft eine kursive Variante des Lauftextes zum Einsatz.
Sind diese 4 potentiellen Designfallen entschärft geht es darum alle möglichen Schriften zu definieren, die man im Design-System der Website festgelegt hat.
Überall kann man typographische Angaben machen, aber nicht überall lohnt es sich. Wenn man sich einmal theoretisch mit den Einstellungen in Elementor auseinandergesetzt hat wird man die richtigen Knöpfe drücken, und mit weniger Aufwand konsistente, DSGVO-Konforme Schriften-Einstellungen erreichen, die noch dazu gut zu verändern sind.
Veröffentlicht am: 9. Juni 2025
Letztes Update: 10. Juni 2025
Sie müssen den Inhalt von reCAPTCHA laden, um das Formular abzuschicken. Bitte beachten Sie, dass dabei Daten mit Drittanbietern ausgetauscht werden.
Mehr Informationen