Schriftarten spielen eine zentrale Rolle im Webdesign und beeinflussen das gesamte Erscheinungsbild einer Website. Wer das Avada Theme nutzt, hat bereits Zugriff auf eine Vielzahl von Google Fonts. Doch manchmal benötigt man eine spezielle Schriftart, die nicht im Standardumfang enthalten ist. In diesem Beitrag erfahren Sie, wie Sie neue Schriftarten zum Avada Theme hinzufügen – sei es durch Google Fonts, lokale Schriftarten oder Adobe Fonts.

1. Warum eigene Schriftarten im Avada Theme nutzen?

Individuelle Schriftarten helfen dabei, eine einzigartige Markenidentität zu schaffen und das Design der Website professioneller zu gestalten. Zudem kann die Wahl einer gut lesbaren und passenden Schriftart die Benutzererfahrung verbessern.

Standardmäßig bietet das Avada Theme Zugriff auf Hunderte von Google Fonts. Doch in manchen Fällen sind diese nicht ausreichend, etwa wenn:

• Eine bestimmte Unternehmensschriftart verwendet werden soll
• Eine Lizenz für eine kostenpflichtige Schriftart erworben wurde
• Ein spezielles Branding gewünscht ist

Zum Glück bietet das Avada Theme verschiedene Möglichkeiten, eigene Schriftarten zu integrieren.

2. Neue Schriftarten im Avada Theme hinzufügen

Methode 1: Google Fonts aktivieren

Google Fonts sind die einfachste Möglichkeit, eine Schriftart im Avada Theme zu nutzen. Da Avada eine direkte Integration mit Google Fonts bietet, können sie problemlos hinzugefügt werden:

1. Gehe im WordPress-Backend zu Avada > Optionen > Typografie.
2. Wähle unter „Schriftart-Familie“ die gewünschte Google Font aus.
3. Speichere die Einstellungen, um die Änderungen zu übernehmen.

Google Fonts sind eine gute Wahl, da sie direkt aus der Cloud geladen werden und die Ladezeit der Website minimal beeinflussen.

Methode 2: Eigene lokale Schriftarten hochladen

Falls eine benutzerdefinierte Schriftart genutzt werden soll, die nicht in Google Fonts verfügbar ist, kann diese lokal hochgeladen werden. Dies ist besonders sinnvoll, wenn Datenschutzrichtlinien (wie die DSGVO in der EU) die Nutzung externer Schriftarten verbieten.

Schritt 1: Schriftdateien vorbereiten

Zunächst wird die Schriftart im Webformat benötigt. Idealerweise sollten folgende Dateiformate vorhanden sein:

• WOFF / WOFF2 (Web Open Font Format, empfohlen für moderne Browser)
• TTF oder OTF (TrueType oder OpenType, für ältere Browser)

Falls die Schrift nur im TTF- oder OTF-Format vorliegt, kann sie mit einem Online-Konverter in WOFF umgewandelt werden.

Schritt 2: Schriftarten in WordPress hochladen

1. Verbinde dich per FTP oder nutze den WordPress-Dateimanager.
2. Lade die Schriftarten in den Ordner /wp-content/uploads/fonts/ hoch.
3. Falls der Ordner noch nicht existiert, erstelle ihn manuell.

Schritt 3: CSS-Code anpassen

Damit WordPress die Schrift erkennt, muss sie per CSS eingebunden werden. Dazu füge den folgenden Code in die Zusätzlichen CSS-Optionen unter „Avada > Optionen > Benutzerdefiniertes CSS“ hinzu:

Nun kann die Schriftart in den Avada-Optionen unter „Typografie“ verwendet werden.

Methode 3: Adobe Fonts (ehemals Typekit) in Avada integrieren

Adobe Fonts sind besonders für professionelle Designer interessant, die auf exklusive Schriftarten zugreifen möchten. Avada ermöglicht die direkte Einbindung von Adobe Fonts über eine API.

Schritt 1: Adobe Fonts-Projekt erstellen

1. Besuche die Website Adobe Fonts.
2. Melde dich an und wähle die gewünschte Schriftart aus.
3. Erstelle ein neues Webprojekt und kopiere die generierte Einbettungs-ID.

Schritt 2: Schriftart in Avada hinzufügen

1. Öffne in WordPress den Bereich Avada > Optionen > Typografie.
2. Klicke auf „Benutzerdefinierte Schriftarten hinzufügen“ und wähle Adobe Fonts.
3. Füge die Einbettungs-ID ein und speichere die Einstellungen.

Die Schriftart ist nun in den Design-Einstellungen von Avada verfügbar.

3. Schriftarten für verschiedene Elemente anpassen

Nachdem eine neue Schriftart hinzugefügt wurde, kann sie gezielt für verschiedene Website-Bereiche festgelegt werden:

• Überschriften (H1, H2, H3 etc.): Anpassung in den Typografie-Optionen von Avada
• Fließtext (Absätze, Listen, Buttons): Auswahl in den globalen oder individuellen Textoptionen
• Menüs und Widgets: Einstellung über den Menü-Customizer oder eigene CSS-Regeln

Falls eine bestimmte Schriftart nur für ein bestimmtes Element gelten soll, kann sie mit einer CSS-Klasse wie folgt definiert werden:

Diese Klasse kann dann in den Avada-Elementoptionen oder im eigenen HTML-Code zugewiesen werden.

4. Häufige Probleme und Lösungen

Beim Hinzufügen neuer Schriftarten können verschiedene Probleme auftreten. Hier sind einige typische Fehler und deren Lösungen:

• Schriftart wird nicht angezeigt?
  → Stelle sicher, dass der richtige Pfad zur Schriftdatei angegeben ist und keine CORS-Probleme auftreten.
• Performance-Probleme durch viele Schriftarten?
  → Lade nur die notwendigen Schriftschnitte (z. B. „Regular“ und „Bold“), um die Ladezeit zu minimieren.
• Google Fonts DSGVO-konform einbinden?
  → Google Fonts lokal hosten, um externe Anfragen zu vermeiden.

Fazit

Das Avada Theme bietet eine hohe Flexibilität bei der Verwendung eigener Schriftarten. Ob über Google Fonts, lokale Schriftarten oder Adobe Fonts – mit den richtigen Schritten lässt sich jede gewünschte Schrift problemlos in das Design einfügen. Wer die DSGVO einhalten oder ein einzigartiges Branding umsetzen möchte, sollte besonders die lokale Einbindung bevorzugen.

Durch das gezielte Anpassen der Schriftarten kann die Website optisch aufgewertet und die Lesbarkeit verbessert werden.