Divi Schriftart hinzufügen: Eine Schritt-für-Schritt-Anleitung

Das Divi-Theme ist eines der beliebtesten und vielseitigsten WordPress-Themes, das von Elegant Themes entwickelt wurde. Es bietet eine einfache Möglichkeit, Webseiten zu erstellen und zu gestalten, ohne dass tiefgehende Programmierkenntnisse erforderlich sind. Ein häufiges Anliegen von Webdesignern und Entwicklern ist es, benutzerdefinierte Schriftarten hinzuzufügen, um die Ästhetik und Benutzererfahrung zu verbessern.

In diesem Blogbeitrag zeigen wir Ihnen, wie Sie eine Schriftart in Divi hinzufügen können. Dies gilt für sowohl Google Fonts als auch benutzerdefinierte Schriftarten, die Sie von externen Quellen oder lokal auf Ihrem Server speichern können. Wir werden die verschiedenen Methoden durchgehen, die sowohl für Anfänger als auch für fortgeschrittene Benutzer geeignet sind.

Warum sollte man eine benutzerdefinierte Schriftart zu Divi hinzufügen?

Bevor wir in die Details einsteigen, möchten wir erklären, warum es sinnvoll sein kann, eine benutzerdefinierte Schriftart zu Divi hinzuzufügen:

1. Einzigartiges Design: Durch das Hinzufügen einer benutzerdefinierten Schriftart können Sie Ihrer Website ein einzigartiges und professionelles Aussehen verleihen.
2. Markenkohärenz: Wenn Sie eine Schriftart haben, die bereits Teil Ihrer Markenidentität ist, kann das Hinzufügen dieser Schriftart zu Ihrer Divi-Seite dazu beitragen, das visuelle Branding zu stärken.
3. Benutzererfahrung: Schriftarten tragen maßgeblich zur Lesbarkeit und Benutzererfahrung bei. Mit der richtigen Schriftart können Sie die Benutzerfreundlichkeit verbessern und das Engagement auf Ihrer Seite erhöhen.

Schritt 1: Google Fonts in Divi hinzufügen

Google Fonts sind eine der einfachsten Methoden, um neue Schriftarten zu Ihrer Webseite hinzuzufügen. Sie sind kostenlos und beinhalten eine riesige Auswahl an Schriftarten. Divi bietet eine native Integration von Google Fonts, sodass die meisten Schriftarten direkt über die Theme-Optionen hinzugefügt werden können.

1.1 Google Fonts über Divi-Design-Einstellungen hinzufügen

1. Gehe zu den Divi Theme-Optionen:
   • Loggen Sie sich in Ihr WordPress-Dashboard ein.
   • Navigieren Sie zu „Divi“ > „Theme-Optionen“.
2. Schriftarten in den Design-Einstellungen ändern:
   • Unter „Allgemein“ scrollen Sie nach unten bis zum Abschnitt „Standard-Schriftarten“. Hier können Sie die Schriftarten für verschiedene Textarten wie „H1“, „Body Text“ und „Navigation“ auswählen.
   • Klicken Sie auf das Dropdown-Menü neben den jeweiligen Textarten und wählen Sie die gewünschte Google Font aus. Es gibt hier eine riesige Auswahl, sodass Sie sicher eine passende Schriftart finden.
3. Änderungen speichern:
   • Nachdem Sie Ihre Schriftarten ausgewählt haben, klicken Sie auf „Änderungen speichern“. Ihre ausgewählten Schriftarten werden nun auf der gesamten Webseite angewendet.

1.2 Google Fonts im Divi Builder verwenden

Wenn Sie den Divi Builder verwenden, können Sie benutzerdefinierte Google Fonts auch direkt in den Moduleinstellungen hinzufügen:

1. Öffnen Sie den Divi Builder:
   • Bearbeiten Sie eine Seite, auf der Sie die Schriftart ändern möchten.
   • Fügen Sie ein Textmodul hinzu oder bearbeiten Sie ein bestehendes Modul.
2. Schriftart im Textmodul auswählen:
   • In den Einstellungen des Textmoduls finden Sie unter „Design“ > „Text“ die Option, eine Schriftart auszuwählen.
   • Wählen Sie im Dropdown-Menü eine der Google Fonts aus oder fügen Sie die benutzerdefinierte Schriftart über den Code ein.
3. Speichern und veröffentlichen:
   • Nachdem Sie die Schriftart ausgewählt haben, klicken Sie auf „Speichern“, um die Änderungen zu übernehmen.

Schritt 2: Benutzerdefinierte Schriftarten in Divi einbinden

Falls Sie eine benutzerdefinierte Schriftart hinzufügen möchten, die nicht bei Google Fonts verfügbar ist, können Sie dies ebenfalls in Divi tun. Sie müssen dazu die Schriftart-Dateien auf Ihrem Server hochladen und dann die entsprechenden CSS-Regeln hinzufügen, um sie auf Ihrer Webseite zu verwenden.

2.1 Schriftart auf den Server hochladen

1. Schriftart herunterladen:
   • Zuerst müssen Sie die Schriftart von einer externen Quelle herunterladen. Dies kann eine Open-Source-Schriftart von Websites wie Font Squirrel oder eine kommerzielle Schriftart von einer Website wie MyFonts sein.
2. Dateien entpacken und hochladen:
   • Entpacken Sie die heruntergeladene Schriftart-Datei, die in der Regel verschiedene Formate wie .woff, .woff2, .ttf oder .eot enthält.
   • Verwenden Sie einen FTP-Client oder den Datei-Manager Ihres Webhostings, um die Schriftart-Dateien in einen Ordner auf Ihrem Server hochzuladen. Ein üblicher Ordnerpfad ist der wp-content/uploads/fonts-Ordner.

2.2 CSS-Regeln hinzufügen

Sobald die Schriftart-Dateien auf den Server hochgeladen wurden, müssen Sie die CSS-Regeln hinzufügen, um die Schriftart in Divi zu verwenden:

1. Öffnen Sie das benutzerdefinierte CSS-Feld:
   • Gehen Sie zu „Divi“ > „Theme-Optionen“ und scrollen Sie zum Bereich „Benutzerdefiniertes CSS“.
2. CSS für die Schriftart hinzufügen:
   • Fügen Sie den folgenden CSS-Code hinzu, um die benutzerdefinierte Schriftart zu verlinken:

@font-face {
    font-family: 'MeineSchriftart';
    src: url('https://www.ihre-webseite.de/wp-content/uploads/fonts/meine-schriftart.woff2') format('woff2'),
         url('https://www.ihre-webseite.de/wp-content/uploads/fonts/meine-schriftart.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Ersetzen Sie den Link zu den Schriftart-Dateien durch den tatsächlichen Pfad zu den von Ihnen hochgeladenen Schriftarten.

3. Verwendung der Schriftart in Divi:
   • Jetzt können Sie die Schriftart auf Ihrer Webseite anwenden, indem Sie den folgenden CSS-Code verwenden:

body {
    font-family: 'MeineSchriftart', sans-serif;
}

Schritt 3: Schriftarten in den Divi Builder-Moduleinstellungen verwenden

Nachdem die benutzerdefinierte Schriftart hinzugefügt wurde, können Sie sie im Divi Builder für Ihre Module verwenden:

1. Modul bearbeiten:
   • Gehen Sie zu einem beliebigen Divi-Modul (z.B. Text, Überschrift, etc.) und öffnen Sie die Einstellungen des Moduls.
2. Design-Einstellungen anpassen:
   • Unter den Design-Optionen für jedes Modul können Sie im Abschnitt „Schriftart“ die benutzerdefinierte Schriftart auswählen, die Sie über das benutzerdefinierte CSS hinzugefügt haben.
3. Änderungen speichern:
   • Klicken Sie auf „Speichern“, um Ihre Änderungen zu übernehmen. Die Schriftart wird nun auf Ihrem Modul angewendet.

Schritt 4: Schriftarten mit dem Divi-Theme Customizer hinzufügen

Alternativ können Sie die benutzerdefinierte Schriftart auch über den WordPress-Customizer hinzufügen:

1. Gehe zu „Design“ > „Customizer“.
2. Wählen Sie „Zusätzliches CSS“ und fügen Sie den oben genannten Code hinzu, um die benutzerdefinierte Schriftart zu verlinken und anzuwenden.

Fazit

Das Hinzufügen von benutzerdefinierten Schriftarten in Divi ist eine einfache Möglichkeit, Ihre Webseite visuell einzigartig und ansprechend zu gestalten. Mit Google Fonts können Sie auf eine große Auswahl an kostenlosen Schriftarten zugreifen, die schnell und einfach in Ihre Webseite integriert werden können. Wenn Sie eine benutzerdefinierte Schriftart verwenden möchten, können Sie dies ebenfalls problemlos tun, indem Sie die Schriftart-Dateien hochladen und mit CSS in Divi verknüpfen.

Durch die Anpassung von Schriftarten können Sie das Design Ihrer Webseite aufwerten und gleichzeitig eine bessere Benutzererfahrung schaffen. Ob Sie Google Fonts oder benutzerdefinierte Schriftarten verwenden, Divi bietet Ihnen die Flexibilität, Ihre Webseite nach Ihren Vorstellungen zu gestalten.