Wie man benutzerdefinierte Schriftarten in Anmeldeformularen verwendet

Du wirst lernen

Lerne, wie du dein Anmeldeformular mit benutzerdefinierten Schriftarten gestaltest, damit deine Kunden eine starke Markenidentität und Konsistenz mit dem Rest deiner Website erleben.

Ein schön gestaltetes Anmeldeformular ist das A und O, wenn du deine Kunden dazu bringen willst, das Ziel deines Formulars zu erreichen. Wenn deine Marke Schriftarten verwendet, die nicht nativ im Anmeldeformular-Editor verfügbar sind, kannst du diese benutzerdefinierten Schriftarten ganz einfach hinzufügen, damit deine Formulare mit dem Rest deiner Website übereinstimmen. Nachdem du deine Schriftarten hinzugefügt hast, kannst du dein Anmeldeformular nach Belieben anpassen.

Wichtige Begriffe

• Benutzerdefinierte Schriftart
  Jede Schriftart, die nicht standardmäßig im Klaviyo-Editor enthalten ist. Dies beinhaltet:
  • Google Fonts
  • Adobe Fonts
  • Importierte Schriftarten
• Websichere Schriftart
  Eine Schriftart, die auf den meisten Geräten lokal geladen ist und daher nicht von einer externen Quelle geladen werden muss, um angezeigt zu werden.
• Fallback-Schriftart
  Eine websichere Schriftart, die verwendet wird, wenn eine Seite die Hauptschriftart nicht laden kann.

Hinzufügen von benutzerdefinierten Schriftarten zu deinem Konto

Navigiere im Hauptmenü auf der linken Seite zu Inhalt > Bilder & Marke. Klicke von dort aus auf die Registerkarte Schriftarten. Du kannst eine Google-Schriftart, eine Adobe-Schriftart oder eine importierte Schriftart einfügen.

Hinzufügen einer Google-Schriftart

Um eine Google-Schriftart hinzuzufügen:

1. Wähle das Dropdown-Menü Schriftart, um eine Liste aller verfügbaren Google-Schriftarten anzuzeigen, mit Ausnahme der Schriftarten, die du bereits in deinem Konto geladen hast.
2. Wähle die gewünschte Schriftart. Nach der Auswahl siehst du eine Vorschau der Schriftart unterhalb der Dropdown-Liste sowie die Anzahl der möglichen Varianten (z. B. fett, kursiv usw.).
   • Wenn du mehr als 1 Variante hinzufügen möchtest, klicke auf den Pfeil neben der Anzahl der möglichen Varianten und wähle die Schriftarten, die du hinzufügen möchtest.
3. Wähle eine Fallback-Schriftart.
4. Klicke auf Schriftart hinzufügen. Deine hinzugefügte Schriftart wird nun im Abschnitt Deine Schriftarten unten auf der Seite angezeigt.

Im Bereich Deine Schriftarten siehst du die Schriftarten, die du deinem Konto hinzugefügt hast. Um eine deiner Schriftarten in diesem Bereich zu bearbeiten oder zu löschen, wählst du die drei Punkte auf der Schriftart.

Hinzufügen einer Adobe-Schriftart

Um eine Adobe-Schriftart hinzuzufügen:

1. Navigiere zu Adobe Fonts.
2. Suche nach dem Link zu deiner Adobe-Schriftart und wähle dann Deine Schriftart aus.
3. Klicke neben dem Namen deiner Schriftart auf das Codesymbol.
4. Gib bei Bedarf einen neuen Projektnamen ein und klicke dann auf Speichern.
5. Kopiere im nächsten Modal die URL https://use.typekit.net für die Schriftart, die du hinzufügen möchtest. Füge die .css nicht ein als Teil der URL, wenn du sie kopierst.
   
6. Navigiere zurück zu Klaviyo und füge die URL in das Feld CSS-Adresse ein.
7. Wähle Weiter und wähle dann eine Fallback-Schriftart für die hochzuladende Schriftart. Beachte, dass, wenn eine Schriftart bereits in deinem Konto verfügbar ist, ein grünes Häkchen neben der Schriftart zu sehen ist und die vorhandene Ausweichschrift angezeigt wird.
   
8. Wähle Schriftart hinzufügen.

Sobald du deine Schriftart hinzugefügt hast, wird sie im Abschnitt Deine Schriftartenunten auf der Seite aufgeführt. Um eine deiner Schriftarten in diesem Bereich zu bearbeiten, wähle die drei Punkte auf der Schriftart.

Hinzufügen einer importierten Schriftart

Wenn du eine eigene Schriftart gekauft oder heruntergeladen hast, die nicht von einem Drittanbieter gehostet wird, kannst du sie trotzdem in einem Klaviyo-Formular verwenden. Zuerst musst du die Schriftdateien an einem Ort hosten, auf den Klaviyo zugreifen kann (zum Beispiel in den Assets deiner Website oder auf einer Font-Hosting-Plattform). Achte darauf, dass du das Cross-Origin Resource Sharing (CORS) aktivierst, indem du den Access-Control-Allow-Origin-Header auf * setzt, damit die Schriftart von den Geräten deiner Empfänger genutzt werden kann.

Um eine importierte Schriftart hinzuzufügen:

1. Benenne deine Schriftart.
2. Gib eine Schriftstärke, einen Stil und eine Quell-URL an. Die Quell-URL muss eine gültige URL sein, die auf WOFF, WOFF2, TTF, EOT oder SVG endet.
3. Optional: Um weitere Varianten hinzuzufügen, wähle Schriftvariante hinzufügen und wiederhole dann Schritt 2 für diese Variante.
4. Wähle Schriftart hinzufügen , um diese Schriftart dem Bereich Deine Schriftarten hinzuzufügen.

Unter Deine Schriftarten kannst du die Schriftarten sehen, die du in dein Konto importiert hast. Du kannst deine Schriftarten auch löschen oder bearbeiten, indem du die 3 Punkte auf der Schriftart auswählst.

Eine Schriftart bearbeiten

So bearbeitest du eine vorhandene benutzerdefinierte Schriftart:

1. Navigiere zum Inhalt > Bilder & Marke > Schriftarten.
2. Finde die Schriftart, die du bearbeiten möchtest, im Abschnitt "Deine Schriftarten" unten auf der Seite.
3. Klicke in der Karte dieser Schriftart auf die 3 Punkte in der oberen Ecke.
4. Wähle Bearbeiten. Von hier aus kannst du:
   • Bearbeite die Fallback-Schriftart für jede benutzerdefinierte Schriftart. 
   • Nur bei den von Google und Klaviyo gehosteten Schriften kannst du die ausgewählten Varianten bearbeiten oder ergänzen, indem du die Liste durch Auswahl der Anzahl der Schriftvarianten erweiterst und dann alle Schriften auswählst, die du hinzufügen möchtest.
     
     

     Du kannst keine Varianten zu Adobe-Schriften hinzufügen, nachdem du sie hochgeladen hast, da die Varianten in deinem Typekit-Link enthalten sind. Um Varianten zu einer Adobe-Schriftart hinzuzufügen, musst du die vorhandene Schriftart löschen und sie über einen anderen Typekit-Link mit allen Varianten, die du einfügen möchtest, erneut hinzufügen.

5. Wenn du mit der Bearbeitung deiner Schrift fertig bist, wähle Update font.

Eine Schriftart löschen

So löschst du eine Schriftart:

1. Navigiere zum Abschnitt deine Schriftarten .
2. Klicke bei der Schrift, die du löschen möchtest, auf die 3 Punkte und wähle dann Löschen. Wenn du dich entscheidest, deine Schriftart zu löschen, wird ein Modal angezeigt, das dich darauf hinweist, dass deine Ersatzschriftart angezeigt wird, wenn deine Schriftart in einem Formular verwendet wird, nachdem du deine hinzugefügte Schriftart gelöscht hast.
   
3. Wähle Löschen.

Sobald eine benutzerdefinierte Schriftart gelöscht wird, werden alle Formulare in Klaviyo, die derzeit die benutzerdefinierte Schriftart verwenden, sofort auf die Ausweichschriftart umgestellt. Wenn du die Schriftart wieder hinzufügst, wird sie in den Formularen wieder verwendet. 

Benutzerdefinierte Schriftarten im Anmeldeformular-Ersteller verwenden

Um deine eigene Schriftart in einem Anmeldeformular zu verwenden, bearbeite einfach den Text in der Formularvorschau:

1. Navigiere zur Registerkarte Anmeldeformular.
2. Suche das Formular, das du bearbeiten möchtest, und klicke auf die 3 Punkte daneben, dann wähle Formular bearbeiten.
3. Markiere in der Formularvorschau den Text, den du bearbeiten möchtest. 
4. Markiere im Menü Text auf der rechten Seite den Text.
5. Verwende das Dropdown-Menü Schriftarten oben, um deine eigene Schriftart auszuwählen. Beachte, dass die Schriften aus dem Bereich deine Schriften in deinem Konto ganz oben in der Liste erscheinen. 
   

   Während der Bearbeitung erscheint deine benutzerdefinierte Schriftart im Canvas (z. B. in der Bearbeitungsvorschau), aber nicht im Panel auf der linken Seite. Auf der linken Seite wird deine Ersatzschriftart anstelle der benutzerdefinierten Schriftart angezeigt.

6. Wenn du mit deinen Änderungen zufrieden bist, klicke auf Veröffentlichen, um sie zu aktivieren.

Website-Schriftart durch Klaviyo.js beeinträchtigt

Klaviyo aktiv On-Site-Tracking (Klaviyo.js), muss manuell oder über deine E-Commerce-Integration installiert werden, um Klaviyo Anmeldeformular auf deiner Website zu veröffentlichen. Wenn du nur einen Teil der Schriftvariationen geladen hast, lädt Klaviyo.js die restlichen Variationen in deiner Bibliothek, wenn sie in deine Website eingefügt wird. Aus diesem Grund kann es sein, dass die Schriftarten auf deiner Website bei diesem Prozess leicht verändert werden, z. B. durch eine Änderung der Gewichtung der Kopfzeile der Website. 

Es gibt 2 Möglichkeiten, um Änderungen, die Klaviyo.js an deinen Schriftarten vornimmt, zu beheben. Du kannst entweder:

• Lösche die betreffenden Schriftarten aus deiner Klaviyo-Schriftartenbibliothek. 
• Update das CSS im Header deiner Website, damit es nicht überschrieben wird, wenn Klaviyo.js die zusätzliche Variation lädt. 
  

  Da diese Option tiefgreifende CSS-Kenntnisse voraussetzt, benötigst du möglicherweise die Hilfe eines Entwicklers. Klaviyo Wir können dir keine Hilfe bei der Anpassung des CSS deiner Website anbieten, aber wir haben ein großes Partnernetzwerk.

Zusätzliche Ressourcen 

• Kurs: Erstellen einer effektiven Akquisitionsstrategie mit dem Anmeldeformular
• So hostest du eine benutzerdefinierte Schriftart auf deiner Website