Elementor bezieht seine Schriftarten, bis auf wenige Systemschriften direkt von Google. Leider ist es aus Datenschutzgründen nicht ohne Weiteres gestattet, diese zu verwenden. Zum Glück bietet uns Elementor* die Möglichkeit an, unsere eigenen Schriftarten hochzuladen und zu verwenden. Leider bietet uns Elementor systemseitig keine Option an, mit der wir die Verbindung zu Google-Fonts trennen können.
Vorbereitungen
Damit du eigene Schriftarten hochladen kannst, solltest du die Verbindung zu Google-Fonts trennen. Das erledigst du am einfachsten mit einem Plug-In wie Disable and Remove Google Fonts. Als Nächstes benötigst du die Schriftarten als Datei, um diese zu deiner Webseite hinzufügen.
Schriftarten herunterladen
Die Schriften von Google-Fonts kannst du auf dieser Webseite: https://google-webfonts-helper.herokuapp.com/fonts herunterladen.
Suche oder wähle auf der linken Seite die Schriftart aus, die du deiner Webseite hinzufügen möchtest.
Wähle als nächstes die Schriftstile aus, die du verwenden möchtest.
Klicke im Anschluss auf den Download-Button.
Die *.zip Datei, die du heruntergeladen hast, wird mehrere Dateitypen eines Schriftstils enthalten. Die Formate sind “svg”, “eot”, “ttf”, “woff” und “woff2”. Du kannst in Elementor jede dieser Dateiformate zu einem Schriftstil hochladen. Vielleicht fragst du dich an dieser Stelle, wozu das gut ist? Das hat vor allem etwas mit den unterschiedlichen Browser-Typen zu tun. Gerade ältere Browser unterstützen längst nicht alle Schriftarten-Dateiformate, “ttf” Dateien beispielsweise werden in älteren Firefox-, Safari- oder Opera-Browsern nicht unterstützt, während “woff2” in fast allen bis auf dem Internet-Explorer unterstützt werden.
Möchtest du also möglichst eine breite Browser-Kompatibilität gewährleisten, solltest du alle Datei-Formate zudem jeweiligen Schriftstil hochladen.
Achte darauf, dass du nicht zu viele unterschiedliche Schriftarten hochlädst, beschränke dich auf 1 – 2 maximal 3 verschiedene Schriftarten. Je mehr du verwendest, desto langsamer wird deine Webseite werden.
Schriftarten in Elementor hochladen
Um Schriftarten in Elementor hochzuladen, navigiere in deinem WordPress-Backend zu “Elementor” > “Benutzerdefinierte Schriftarten”.
Um eine neue Schriftart hochzuladen, klicke auf die Schaltfläche “Neue hinzufügen”.
Benenne die Schriftart und klicke auf die Schaltfläche “Schriftart Variante hinzufügen”.
Achte auf den Dateinamen, lautet dieser “regular” ist damit der “Grad des Fettdrucks” “Normal” gemeint. Im “Stil” solltest du dich auf “Normal” und “Kursiv” oder auch “italic” beschränken.
Lade jedes Dateiformat eines Schriftstils einzeln hoch.
Hast du alle Dateiformate eines Schriftstils hochgeladen, beispielsweise alle Dateiformate deines “regular” oder “Normal” Schriftstils, dann klicke auf die Schaltfläche “Schriftart Variante hinzufügen” um weitere Stile einzubinden.
Du kannst deine Arbeit zwischendurch “Speichern” bzw. “Aktualisieren”.
So könnte deine Schriftstil-Liste am Ende aussehen, in diesem Beispiel habe ich alle Schriftstile der Schriftart “Lato” in Elementor* hinzugefügt.
Wiederhole die einzelnen Schritte um ggf. eine weitere Schriftart in Elementor hochzuladen.
Schriftarten in Elementor verwenden
Du hast nun Zugriff auf deine neue Schriftart. In jedem Elementor-Widget indem du Typografie-Einstellungen vornehmen kannst, hast du Zugriff auf deine Schriftart.
Eigene Schriftart als Standard in Elementor festlegen.
Elementor bietet dir zudem die Möglichkeit deine neue Schriftart als Standard festzulegen. Das erleichtert dir die Arbeit enorm, den so musst du nicht jedes einzelne Widget manuell umstellen. Achte dabei darauf das in den “Typografie-Einstellungen” dann alle auf “Vorgabe” eingestellt sind (Standardwert).
Navigiere in einer beliebigen Elementor Seite oder Beitrag oben links auf das “Einstellungsmenü” . Wähle hier das sog. “Hamburger-Menü” aus.
Wähle hier den Eintrag “Standardschriftarten” aus.
Wähle für die einzelnen Bereiche wie “Primäre Überschrift”, “Sekundäre Überschrift”, “Haupttext” und “Hervorgehobener Text” deine Schriftart aus.
Bestätige im Anschluss deine Vorgaben mit einem Klick auf “Anwenden”. Deine Einstellungen werden Global auf all deine Elementor-Elemente angewandt.
Fazit
Zwar bietet dir Google-Fonts eine riesen Auswahl an Schriftarten, jedoch ist es nicht einfach diese auch Datenschutz-konform zu nutzen. Der einfachste Weg ist hier, die Verbindung zu Google-Fonts zu trennen und ein oder zwei eigene Schriftarten in Elementor* einzubinden.
Mit einem * gekennzeichnete Links sind Affiliate-Links. Kaufst du über solch einen Link ein, erhalte ich eine Provision. Vielen Dank für deine Unterstützung.