Variable Schriftarten verwenden

Variable Schriftarten sind eine fortschrittliche Schrifttechnologie, die es einer einzigen Schriftdatei ermöglicht, mehrere Stile und Variationen zu enthalten, wie z. B. unterschiedliche Stärken, Breiten und optische Größen. Im Gegensatz zu herkömmlichen Schriftarten, die separate Dateien für jeden Stil (z. B. fett, kursiv, schmal) erfordern, kann eine variable Schriftart diese Eigenschaften dynamisch innerhalb einer einzigen Datei anpassen.

Variable Schriftarten bieten mehrere Vorteile gegenüber herkömmlichen Schriftarten:

• Kontrolle: Bei herkömmlichen Schriftarten sind Sie auf vorgegebene Eigenschaften beschränkt. Zum Beispiel müssen Sie möglicherweise zwischen einer Stärke von 400 oder 600 wählen. Mit variablen Schriftarten haben Sie die vollständige Kontrolle und können eine Stärke von 475 wählen, wenn dies für Ihr Design am besten ist.
• Leistung: Durch die Verwendung einer einzigen Schriftdatei, die alle Variationen enthält, können variable Schriftarten die Anzahl der HTTP-Anfragen und die Gesamtdateigröße reduzieren, die zum Laden verschiedener Schriftstile erforderlich ist, was die Website-Leistung verbessert.
• Responsive Typografie: Variable Schriftarten ermöglichen dynamische Anpassungen der Typografie basierend auf Bildschirmgröße, Auflösung oder Benutzerpräferenzen. Zum Beispiel könnte eine Schriftart auf kleineren Bildschirmen schmaler werden, um Platz zu sparen, oder den Kontrast bei kleineren Größen erhöhen, um die Lesbarkeit zu verbessern.
• CSS-Integration: Variable Schriftarten können mit CSS gesteuert werden. Eigenschaften wie `font-weight`, `font-stretch` und `font-style` können mit Werten jenseits des üblichen festen Satzes angepasst werden, was eine granularere Kontrolle ermöglicht. Dies bedeutet auch, dass Sie Animationen zu variablen Schriftarten hinzufügen können.

Variable Schriftarten hinzufügen

Bevor Sie variable Schriftarten verwenden, müssen Sie diese über WP Admin importieren. 

Hinweis: Variable Schriftarten verfügen über mehrere Variablen, mit denen Sie sie anpassen können. Breite und Stärke sind die beiden am häufigsten verwendeten, und diese beiden werden in Elementor unterstützt.  

So fügen Sie eine variable Schriftart hinzu:

1. Suchen Sie eine variable Schriftart, die Sie verwenden möchten, und laden Sie sie auf Ihren PC herunter. Möglicherweise müssen Sie die Datei entpacken.
   Variable Schriftarten sind von verschiedenen Anbietern erhältlich, darunter Google Fonts. In Google Fonts können Sie die minimale und maximale Stärke und Breite überprüfen, indem Sie auf Type Tester klicken und die Schieberegler verwenden, um die minimalen und maximalen Werte herauszufinden.
   
   Notieren Sie die minimale und maximale Stärke und Breite der Schriftart. Das werden Sie später brauchen.
   
2. Gehen Sie zu WP Admin und navigieren Sie zu Elementor>Benutzerdefinierte Schriftarten.
   Der Bildschirm „Benutzerdefinierte Schriftarten“ wird angezeigt.
   
3. Klicken Sie auf Neu hinzufügen.
   
4. Klicken Sie auf Variable Schriftart hinzufügen.
   Der Upload-Bildschirm wird angezeigt.
   
5. Klicken Sie auf Hochladen und navigieren Sie zum Speicherort der Schriftartdatei.
   
6. Wählen Sie die variable Schriftartdatei aus und klicken Sie unten rechts auf ttf-Datei auswählen.
   
7. Geben Sie im Textfeld Schriftfamilie eingeben der Schriftart einen Namen.
   
8. Aktivieren Sie Breite und geben Sie die minimale und maximale Breite Ihrer Schriftart ein. Diese Informationen sind vom Schriftersteller erhältlich.
9. Aktivieren Sie Stärke und geben Sie die minimale und maximale Stärke Ihrer Schriftart ein. Diese Informationen sind vom Schriftersteller erhältlich.
   
   Note

   Sie müssen eine minimale und maximale Stärke und/oder Breite festlegen, damit die Schriftart korrekt funktioniert. Nicht alle Schriftarten enthalten sowohl die Breiten- als auch die Stärkenvariable. In diesen Fällen aktivieren Sie einfach die relevante Variable.
   
   
10. Klicken Sie auf Veröffentlichen/Aktualisieren.
    Sie können diese Schriftart nun im Elementor Editor verwenden.

Variable Schriftarten im Elementor Editor verwenden

Sobald Sie die variablen Schriftarten installiert haben, können Sie sie in jedem Widget verwenden, das eine Typografie-Option hat. Im folgenden Beispiel verwenden wir eine variable Schriftart im Überschriften-Widget.

So verwenden Sie variable Schriftarten in einem Widget:

1. Ziehen Sie ein Widget, das Text enthält, auf die Arbeitsfläche.
   
2. Wählen Sie im Bedienfeld die Option Typografie aus. Diese Option finden Sie normalerweise im Tab Stil.
3. Klicken Sie auf das Bleistiftsymbol .
   Eine Liste der Schriftarten und Schriftoptionen wird angezeigt.
   
4. Wählen Sie eine variable Schriftart aus. Diese Schriftarten befinden sich oben in der Schriftartenliste in einem Abschnitt mit der Bezeichnung Variable Schriftarten.
   
5. Verwenden Sie die Schieberegler für Breite und/oder Stärke, um das Aussehen der Schriftart zu bestimmen.
   Ihr Text wird nun genau so angezeigt, wie Sie es wünschen.