Elementor: Eigene Schriftarten einbinden für eine individuellere Website
Elementor ist eines der beliebtesten Page Builder-Plugins für WordPress, das eine Vielzahl von Designmöglichkeiten bietet, um deine Website nach deinen Vorstellungen zu gestalten. Eines der wichtigsten Elemente im Webdesign ist die Wahl der richtigen Schriftart, da sie das Erscheinungsbild und die Lesbarkeit der Seite erheblich beeinflusst. Wenn du eine Website mit Elementor erstellst, stehen dir viele Schriftarten zur Auswahl. Doch was, wenn du eine eigene Schriftart verwenden möchtest? In diesem Artikel zeigen wir dir, wie du mit Elementor eigene Schriftarten einbinden kannst, um deine Website noch individueller und ansprechender zu gestalten.
Warum eigene Schriftarten einbinden?
Die Wahl der richtigen Schriftart ist entscheidend für den Erfolg deiner Website. Schriftarten sind nicht nur funktional, sondern auch ein wesentlicher Bestandteil des visuellen Designs. Eine maßgeschneiderte Schriftart kann deiner Marke Persönlichkeit verleihen und die Benutzererfahrung verbessern.
Während Elementor viele Google Fonts zur Verfügung stellt, möchten viele Website-Besitzer eine spezifische Schriftart verwenden, die sie entweder selbst erstellt haben oder die sie gekauft haben. Dies könnte eine Marken-Schriftart oder eine speziell gestaltete Schriftart sein, die du für deine Designvision benötigst.
Mit Elementor kannst du ganz einfach eigene Schriftarten einbinden. Dadurch hast du die Kontrolle darüber, wie deine Website aussieht und fühlt sich zugleich vollständig an.
Methoden, um eigene Schriftarten in Elementor zu integrieren
Es gibt mehrere Methoden, um eigene Schriftarten in Elementor zu integrieren. Im Folgenden zeigen wir dir, wie du dies auf verschiedene Arten tun kannst, je nachdem, welche Anforderungen du hast.
1. Methode: Schriftarten über die WordPress-Medienbibliothek hochladen
Die einfachste Methode, um eine eigene Schriftart in Elementor zu verwenden, ist das Hochladen der Schriftart-Datei direkt über die WordPress-Medienbibliothek. Diese Methode eignet sich besonders gut, wenn du nur eine oder zwei Schriftarten auf deiner Website verwenden möchtest.
Schritt-für-Schritt-Anleitung:
- Schritt 1: Gehe zu deinem WordPress-Dashboard und klicke auf „Medien“ > „Datei hinzufügen“.
- Schritt 2: Lade die Schriftart-Datei(en) (TTF, OTF oder WOFF-Formate) in die Medienbibliothek hoch.
- Schritt 3: Notiere dir den URL-Link der hochgeladenen Schriftart-Datei.
- Schritt 4: Öffne nun das WordPress-Theme und gehe zu „Design“ > „Customizer“ > „Zusätzliches CSS“.
- Schritt 5: Verwende den folgenden CSS-Code, um die Schriftart auf deiner Website zu aktivieren:
@font-face {
font-family: 'MeineSchriftart';
src: url('URL-der-Schriftart-Datei') format('truetype');
}
Ersetze „URL-der-Schriftart-Datei“ mit dem tatsächlichen URL-Link, den du aus der Medienbibliothek kopiert hast. Du kannst mehrere Schriftarten einbinden, indem du unterschiedliche Formate wie TTF, OTF oder WOFF verwendest, um eine bessere Kompatibilität zu gewährleisten.
- Schritt 6: Füge dann den Namen der Schriftart in das CSS von Elementor hinzu, um sie in deinen Design-Elementen zu verwenden:
body {
font-family: 'MeineSchriftart', sans-serif;
}
Jetzt wird die von dir hochgeladene Schriftart auf deiner gesamten Website angezeigt.
2. Methode: Verwendung von Elementor’s benutzerdefinierten Schriftarten-Funktion
Elementor Pro bietet eine eingebaute Möglichkeit, eigene Schriftarten zu integrieren, ohne dass du manuell CSS hinzufügen musst. Diese Methode eignet sich besonders für Nutzer, die mit Elementor Pro arbeiten und es einfacher haben möchten.
Schritt-für-Schritt-Anleitung:
- Schritt 1: Gehe zu deinem WordPress-Dashboard und klicke auf „Elementor“ > „Benutzerdefinierte Schriftarten“.
- Schritt 2: Klicke auf „Neue Schriftart hinzufügen“, um eine neue benutzerdefinierte Schriftart hinzuzufügen.
- Schritt 3: Gib der Schriftart einen Namen, der leicht zu identifizieren ist.
- Schritt 4: Lade die Schriftart-Dateien (TTF, OTF oder WOFF) hoch. Achte darauf, dass du alle Formate hochlädst, um die maximale Kompatibilität zu gewährleisten.
- Schritt 5: Klicke auf „Veröffentlichen“ und speichere die Schriftart.
Jetzt kannst du diese benutzerdefinierte Schriftart direkt in den verschiedenen Elementor Widgets verwenden. Gehe einfach in das Widget, das du anpassen möchtest (z. B. einen Textblock oder eine Überschrift), und wähle deine benutzerdefinierte Schriftart aus den Schriftart-Optionen.
3. Methode: Schriftarten mit einem Child-Theme einbinden
Wenn du regelmäßig eigene Schriftarten auf deiner Website verwenden möchtest und das Hinzufügen von CSS über den Customizer oder die benutzerdefinierten Elementor-Einstellungen nicht ausreicht, ist das Erstellen eines Child-Themes eine hervorragende Möglichkeit, Schriftarten zu integrieren.
Schritt-für-Schritt-Anleitung:
- Schritt 1: Erstelle ein Child-Theme (falls noch nicht vorhanden) oder gehe zu deinem bestehenden Child-Theme.
- Schritt 2: Lade die Schriftart-Dateien (TTF, OTF, WOFF) in einen Ordner deines Child-Themes hoch, zum Beispiel:
/wp-content/themes/dein-child-theme/fonts/. - Schritt 3: Öffne die
style.css-Datei deines Child-Themes und füge folgenden Code hinzu:
@font-face {
font-family: 'MeineSchriftart';
src: url('https://www.deinewebsite.de/wp-content/themes/dein-child-theme/fonts/meineschriftart.woff2') format('woff2'),
url('https://www.deinewebsite.de/wp-content/themes/dein-child-theme/fonts/meineschriftart.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Ersetze den Dateipfad mit dem tatsächlichen Pfad zu deiner Schriftart. Achte darauf, dass du WOFF und WOFF2 verwendest, um die besten Ladezeiten zu gewährleisten.
- Schritt 4: Verwende dann die Schriftart in deinem CSS, um sie auf deiner gesamten Website oder in bestimmten Bereichen anzuwenden:
body {
font-family: 'MeineSchriftart', sans-serif;
}
Diese Methode bietet dir vollständige Kontrolle und ist besonders nützlich, wenn du mehr Flexibilität benötigst und mehrere Schriftarten für deine Website verwenden möchtest.
Tipps für die Verwendung eigener Schriftarten in Elementor
- Kompatibilität: Stelle sicher, dass du die richtigen Schriftartenformate verwendest. WOFF und WOFF2 sind die gängigsten und unterstützen die meisten Browser. OTF und TTF sind ebenfalls gebräuchlich, aber weniger optimiert für das Web.
- Schriftarten optimieren: Achte darauf, nur die Schriftarten und -gewichte zu verwenden, die du tatsächlich benötigst. Das Entfernen nicht verwendeter Schriftarten oder -gewichte hilft, die Ladezeiten zu verbessern.
- Verwendung von Google Fonts: Wenn du eine Google Font verwenden möchtest, aber die externen Anfragen vermeiden möchtest, kannst du diese lokal auf deinem Server speichern. Dies ist besonders wichtig für die DSGVO-Konformität.
Fazit
Das Einbinden von eigenen Schriftarten in Elementor ist eine hervorragende Möglichkeit, deine Website individuell und markenkonform zu gestalten. Egal, ob du eine Schriftart direkt über die Medienbibliothek hochlädst, die benutzerdefinierte Schriftarten-Funktion von Elementor Pro nutzt oder ein Child-Theme einrichtest, du hast zahlreiche Optionen, um deine Schriftarten zu integrieren.
Indem du eigene Schriftarten einsetzt, kannst du sicherstellen, dass deine Website einzigartig aussieht und die Markenidentität stärkt. Gleichzeitig ist es wichtig, auf die Ladegeschwindigkeit und die Kompatibilität der Schriftarten zu achten, um eine optimale Nutzererfahrung zu gewährleisten.
