Elementor eigene Schriftarten verwenden
in ,

Eigene Schriftarten in Elementor verwenden

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.

Im Prinzip arbeitest du nun die Schriftstile wie im Dateinamen beschrieben durch.

Werbung, dieser Werbebanner enthält einen Affiliate-Link. Vielen Dank für deine Unterstützung.

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ü“ Elementor Menüleiste. 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.

Was denkst du über diesen Beitrag?

136 points
Upvote Downvote
wp-pagebuilder-info

Written by wp-pagebuilder-info

Mit einem Faible für Grafikdesign und Webseiten begann ich meine Karriere in einer Werbeagentur für Großformatdrucke. Webgestaltung und Webseiten ließen mich aber nie ganz los, sodass ich nebenbei noch einige Webprojekte und Blogs betreibe. Vor einigen Jahren noch mit Joomla, bin ich nun gänzlich auf WordPress umgestiegen und bedaure diesen Schritt bis heute nicht. Mit dem Page-Builder Elementor habe ich dabei recht früh begonnen zuarbeiten und war von Anfang an begeistert wie dieser mit WordPress harmoniert. So war es nur eine Frage der Zeit bis ich ein Webprojekt, das sich auf diesen Page-Builder konzentriert gestartet habe. Mit diesem Blog möchte ich nun mein gesammeltes Wissen zu WordPress und Elementor weitergeben und hoffe, das du von dieser Erfahrung für deine Projekte profitieren kannst.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Elementor Schritt für Schritt Anleitung

Elementor Schritt für Schritt: E-Book & Taschenbuch

Elementor Standardfarben

Standardfarben in Elementor verwenden