Schriften in Elementor richtig einstellen: So vermeidest Du Flickenteppiche und sorgst mit globalen Schriften für ein konsistentes Design und ein gutes Gefühl.
Wenn ich eine neue WordPress Installation mit Elementor aufsetze, ist eine der ersten Amtshandlungen, die Schriften in den Websiteeinstellungen von Elementor global einzustellen.
Viele, die ihre Website selbst bauen, machen das nicht, und haben später zu oft einen echten Schriftenflickenteppich – hier eine andere Schrift, dort eine andere Größe.. Das sorgt nicht nur für Verwirrung, sondern auch für Unmut.
Wie Du es besser machen kannst, verrate ich Dir in diesem Beitrag und bringe Licht ins Dunkel der Elementor-Schrifteinstellungen.
Der große Unterschied: Design-System vs. Theme-Stil
Bevor ich in die Details gehe, lass uns erst einmal klären, was eigentlich der Unterschied zwischen den „Globalen Schriftarten“ im Design-System und der „Typografie“ im Theme-Stil ist. Diese Verwirrung ist völlig normal – sogar erfahrene Elementor-Nutzer:innen stolpern hier manchmal.
Du findest die Einstellungen, indem Du eine Seite im Elementor Pagebuilder öffnest und dann im Menü links oben neben dem Elementor Logo auf das Symbol „Website-Einstellungen“ klickst.
Globale Schriftart im Design-System: Dein typografischer Kompass
Die globalen Schriftarten im Design-System sind der zentrale Anlaufpunkt für alle übergreifenden Schrifteinstellungen. Hier kannst Du die Basis-Schriftarten, die sich wie ein roter Faden durch Deine gesamte Website ziehen, definieren.
Von Haus aus bringt Elementor Pro folgende Schriftoptionen mit:
- Primary Headline: Deine Haupt-Überschrift (meist H1)
- Secondary Headline: Unterüberschriften (H2-H6)
- Body Text: Der Fließtext Deiner Website
- Accent Text: Für besondere Texthervorhebungen
Diese Einstellungen wirken sich auf alle neuen Elemente aus, die Du auf Deiner Website einfügst.
Hier gebe ich die Einstellungen der Schriften für die Start- wie die Unterseiten ein. Neben den obigen vorgegebenen Optionen, kann ich beliebig viele, weitere unter „Individuelle Schriften“ hinzufügen:
Ich nutze diese Option, um für Start- und Unterseiten mit Schriften als Designelement zu spielen. So definiere ich unterschiedliche Schrifteinstellungen für eine H1 und H2 im Herobereich versus eine H2 oder H3 in einem weiteren Abschnitt nach dem Hero.
Bei mir ist auch eine H3 gerne mal optisch größer als eine H2, obwohl nach HTML-Regeln in der Hierarchie darunter.
Füge ich jetzt ein neues Widget in Elementor hinzu (zum Beispiel eine Überschrift), kann ich sie mit diesen Schriften global verknüpfen. Das erkennst Du daran, dass dann das Symbol der Weltkugel rosa ist. Der Vorteil dabei: Sollte ich später meinen Style Guide anpassen und eine bestimmte Überschrift ändern wollen, muss ich sie nur in den globalen Einstellungen anpassen und alle verknüpften Überschriften erstrahlen direkt mit im neuen Design.
Typografie im Theme-Stil: Der Feinschliff für Deine Blogvorlage
Die Typografie im Theme-Stil hingegen bezieht sich auf die spezifischen Schrifteinstellungen Deines aktiven Themes oder Templates. Hier kannst Du die Darstellung bestimmter HTML-Elemente (H1, H2, p, etc.) noch einmal individuell anpassen.
Ich nutze diese Option, um die Schriften und -größen für meine Blogbeiträge zu definieren. Dabei gehe ich streng nach Hierarchie vor: Eine H1 ist größer als eine H2. Diese wiederum größer als eine H3 und so weiter.
Während ich auf einer Unterseite auch gerne mal mit riesigen H1 Überschriften spiele, sind die Größenunterschiede im Blog bei mir in der Regel sehr viel dezenter, damit sich die Blogartikel „angenehmer“ lesen lassen 😉
Meine Tipps: So stellst Du Deine Schriften richtig ein
Globale Schriftarten definieren
- Öffne den Elementor-Editor
- Klicke auf das Hamburger-Menü (die drei Striche oben links)
- Wähle „Website-Einstellungen“
- Gehe zu „Design-System“ → „Globale Schriftarten“
Hier legst Du nun Deine Basis-Schrifteinstellungen fest:
- Schriftfamilie: Wähle eine Hauptschrift für Überschriften und eine für Fließtext
- Schriftgröße: Definiere sinnvolle Grundgrößen
- Schriftgewicht: Normal, fett, extra-fett – je nach Bedarf
- Zeilenhöhe: Für optimale Lesbarkeit (meist 1.4-1.6)
Pro-Tipp: Weniger ist mehr! Beschränke Dich auf maximal 2-3 verschiedene Schriftarten pro Website. Ich empfehle Dir eine für Überschriften und eine weitere für den Fließtext. Zusätzlich kannst Du noch eine Akzentschrift einsetzen, um zum Beispiel Zitate hervorzuheben.
Individuelle Anpassungen vornehmen
Manchmal brauchst Du für spezielle Elemente andere Schrifteinstellungen:
- Wähle das entsprechende Widget aus
- Gehe zum „Stil“-Tab
- Klicke auf die Typografie-Einstellungen
- Passe die Einstellungen individuell an: Wandle Normalschrift in Großbuchstaben um, unterstreiche Sätze oder passe den Abstand zwischen den Buchstaben an.
Vergiss nich das responsive Design
Elementor bietet Dir drei Ansichtsmodi: Desktop, Tablet und Mobil. Nutze diese!
- Desktop: Hier kannst Du großzügiger mit Schriftgrößen umgehen
- Tablet: Reduziere die Größen etwas, aber halte sie noch gut lesbar
- Mobil: Hier zählt Lesbarkeit über alles – lieber etwas größer als zu klein
Übrigens, Elementor vererbt die Schriftarteinstellungen von Desktop über Tablet zu Mobile. Stellst Du hier nichts individuell ein, nimmt Elementor auch für Mobile die Größe, die Du für Desktop ausgewählt hast.
Custom Fonts: So gehst Du am besten vor
Ich arbeite im Webdesign bei Schriften gerne mit Google Fonts. Dort gibt es eine riesige Auswahl an unterschiedlichsten Schriften zur freien Verwendung und meine Kund:innen können sie für den Wiedererkennungswert auch in ihren Marketingmaterialien, auf Canva, auf Social Media etc. einsetzen.
Die Schriften auf der Website aber direkt über die Google API einzubinden, ist ein No-Go – gerade im Hinblick auf Datenschutz, Ladegeschwindigkeit und Kontrolle (Du erinnerst Dich vielleicht noch an die Abmahnwelle in 2022 … ?).
Wie machst Du es also richtig? Du lädst sie direkt auf Deinen Server hoch und lässt sie von dort abrufen.
Schritt 1: Schriften beschaffen
- Besuche Google Fonts und lade Deine gewünschte Schrift herunter
- Nutze das gratis Tool Transfonter.org , um diese in eine WOFF2-Datei zu verwandeln und lade sie herunter.
Warum WOFF2? Diese Dateien sind super komprimiert, laden schnell und werden von allen modernen Browsern unterstützt.
Schritt 2: Upload auf Deinen Server
- Gehe im Dashboard auf Elementor > Eigene Schriften > Neue Schrift hinzufügen und gib den Namen der Schrift an.
- Dann lade alle Woff2-Varianten hoch und verknüpfe sie entsprechend
- Abspeichern nicht vergessen
Schritt 3: Schriften nutzen
Jetzt findest Du diese in jedem Elementor Widget mit Text unter Typografie ganz oben und kannst getrost die Google Fonts (via Google API) in den Elementor Einstellungen deaktivieren.
Meine goldenen Regel für professionell eingesetzte Schriften
Regel 1: Hierarchie schaffen
Lege Dir eine Übersicht oder Tabelle an und bleibe dabei:
- H1: Zum Beispiel 36-48px (am Desktop)
- H2: 28-36px
- H3: 24-28px
- Body Text: 16-18px
Regel 2: Kontrast beachten
Deine Schriften müssen sich vom Hintergrund abheben. Ein Kontrastverhältnis von mindestens 4.5:1 ist Pflicht.
Regel 3: Zeilenhöhe optimieren
Lass Deine Texte atmen, indem Du für Luft zwischen den Zeilen sorgst:
- Überschriften: 1.2-1.3 em
- Fließtext: 1.4-1.6 em
- Kleine Texte: 1.3-1.4 em
Häufige Fehler vermeiden
❌ Zu viele verschiedene Schriftarten: Maximal 2-3 Schriftfamilien pro Website!
❌ Zu kleine Schriften auf Mobil: 16px sollten das Minimum für Fließtext sein.
❌ Schlechte Fallback-Schriften: Definiere immer Fallback-Schriften wie „Arial, sans-serif“, sollte Deine ausgewählte Schrift nicht richtig laden.
Zum Abschluss: Der Workflow für perfekte Schrifteinstellungen
- Planung: Definiere Dein Schriftkonzept VOR dem Design
- Design-System: Stelle globale Schriften ein
- Template: Passe Theme-Stil-Einstellungen an (etwa für mit dem Block Editor geschriebene Blogposts)
- Testing: Teste Schriften auf allen Geräten und in verschiedenen Browsern
- Optimierung: Feintuning basierend auf den Tests (manchmal braucht es ein bisschen Trial & Error, bis Du mit dem Ergebnis zufrieden bist)
Mit dem richtigen Verständnis für Design-System vs. Theme-Stil und einem durchdachten Workflow wird die Schrifteinstellung in Elementor zum Kinderspiel. Und denk daran: Konsistenz ist der Schlüssel zu einer professionell aussehenden Website 😁
Unterstützung gesucht?
Du brauchst Unterstützung bei Deiner WordPress Website oder mit Elementor? Kein Ding, buch Dir gleich ein unverbindliches Kennenlerngespräch mit mir und wir schauen, wie ich Dich unterstützen kann 😊
