So verwendest du benutzerdefinierte Schriftarten in Anmeldeformularen
Übersicht
Erfahre, wie du deine Anmeldeformulare mit benutzerdefinierten Schriftarten gestaltest, damit Kund*innen 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. Dazu gehören:- Google Fonts
- Adobe Fonts
- Importierte Schriftarten
- Websichere Schriftart
Eine Schriftart, die auf den meisten Geräten lokal gespeichert 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 primäre Schriftart nicht laden kann.
Hinzufügen von benutzerdefinierten Schriftarten zu deinem Konto
Navigiere im Hauptmenü auf der linken Seite zu Inhalt > Bilder und Marke. Klicke von dort aus auf die Registerkarte Schriftarten. Du kannst eine Google-Schriftart, eine Adobe-Schriftart oder eine importierte Schriftart einfügen.
Wenn du eine benutzerdefinierte Schriftart zu Klaviyo hinzufügst, die auf deiner Website bereits verwendet wird, lade genau den Schriftschnitt (z. B. Light, Bold oder Italic) und die Schriftstärke (z. B. 400) hoch, die deine Website derzeit verwendet. Wenn du eine Schriftart hochlädst und einen Schriftschnitt oder eine Schriftstärke auswählst, die leicht abweicht, können die in Klaviyo ausgewählten Stile einige der vorhandenen Schriftstile deiner Website überschreiben.
Eine Google Font hinzufügen
So fügst du eine Google-Schriftart hinzu:
- 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.
- Wähle die gewünschte Schriftart. Nach der Auswahl siehst du eine Vorschau der Schriftart unterhalb der Drop-down-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.
- Wähle eine Fallback-Schriftart.
- 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.
Bitte beachte vor dem Hintergrund der DSGVO, dass Google Fonts von Google gehostet werden. Wenn du eine Google-Schriftart in deine Schriftarten-Bibliothek aufnimmst, verwendest du die Google-Schriftart. Klaviyo stellt dir eine Auswahl an benutzerdefinierten Schriftarten zur Verfügung, die wir in unseren Anmeldeformular-Vorlagen verwenden und die du einfach importieren und nutzen kannst. Sieh dir die Liste der von Klaviyo gehosteten Schriftarten an.
Eine Adobe-Schriftart hinzufügen
Du musst ein Adobe-Konto haben, um Adobe-Schriftarten zu verwenden.
So fügst du eine Adobe-Schriftart hinzu:
- Navigiere zu Adobe Fonts.
- Suche nach dem Link zu deiner Adobe-Schriftart und wähle dann Deine Schriftart aus.
- Klicke neben dem Namen deiner Schriftart auf das Codesymbol.
- Gib bei Bedarf einen neuen Projektnamen ein und klicke dann auf Speichern.
- 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.
- Navigiere zurück zu Klaviyo und füge die URL in das Feld CSS-Adresse ein.
- 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.
- 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.
Eine importierte Schriftart hinzufügen
Wenn du eine benutzerdefinierte Schriftart gekauft oder heruntergeladen hast, die nicht von einer Drittanbieterquelle gehostet wird, kannst du sie trotzdem in einem Klaviyo-Formular verwenden. Hoste zuerst die Schriftdateien an einem Ort, auf den Klaviyo zugreifen kann (z. B. in den Assets deiner Website oder auf einer Plattform zum Hosten von Schriftarten). Stelle sicher, dass du Cross-Origin Resource Sharing (CORS) aktivierst, indem du Access-Control-Allow-Origin header auf * setzt, damit die Schriftart von den Geräten deiner Empfänger*innen abgerufen werden kann.
So fügst du eine importierte Schriftart hinzu:
- Benenne deine Schriftart.
- 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.
- Optional: Um weitere Varianten hinzuzufügen, wähle Schriftvariante hinzufügen und wiederhole dann Schritt 2 für diese Variante.
- Wähle Schriftart hinzufügen , um diese Schriftart dem Bereich Deine Schriftarten hinzuzufügen.
Im Bereich 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 drei Punkte auf der Schriftart auswählst.
Schriftart bearbeiten
So bearbeitest du eine benutzerdefinierte vorhandene Schriftart:
- Navigiere zu Inhalt > Bilder und Marke > Schriftarten.
- Suche im Abschnitt Deine Schriftarten unten auf der Seite nach der Schriftart, die du bearbeiten möchtest.
- Klicke in der Karte dieser Schriftart auf die 3 Punkte in der oberen Ecke.
- Wähle Bearbeiten. Von hier aus kannst du:
- Bearbeite die Fallback-Schriftart für jede benutzerdefinierte Schriftart.
- Nur für Google- und von Klaviyo gehostete Schriftarten: Bearbeite oder füge zu den ausgewählten Varianten hinzu, indem du Anzahl der Schriftvarianten auswählst, um die Liste zu erweitern, und dann alle Schriftarten auswählst, die du hinzufügen möchtest.
Bei Adobe-Schriftarten kannst du nach dem Hochladen keine Varianten mehr hinzufügen, da die Varianten in deinem Typekit-Link integriert sind. Um Varianten zu einer Adobe-Schriftart hinzuzufügen, musst du die vorhandene Schriftart löschen und sie mithilfe eines anderen Typekit-Links erneut hinzufügen, der alle Varianten enthält, die du einbeziehen möchtest.
- Wenn du mit der Bearbeitung deiner Schrift fertig bist, wähle Update font.
Eine Schriftart löschen
So löschst du eine Schriftart:
- Navigiere zum Abschnitt deine Schriftarten .
- 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 darüber informiert, dass, wenn deine Schriftart in Formularen verwendet wird, nach dem Löschen deiner hinzugefügten Schriftart deine Ersatzschriftart angezeigt wird.
- 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 Fallback-Schriftart zurückgesetzt. Wenn du die Schriftart erneut hinzufügst, werden diese Formulare sie wieder verwenden.
Benutzerdefinierte Schriftarten im Anmeldeformular-Builder verwenden
Um deine eigene Schriftart in einem Anmeldeformular zu verwenden, bearbeite einfach den Text in der Formularvorschau:
- Navigiere zur Registerkarte Anmeldeformular.
- Suche das Formular, das du bearbeiten möchtest, und klicke auf die 3 Punkte daneben, dann wähle Formular bearbeiten.
- Wähle in der Formularvorschau den Text aus, den du bearbeiten möchtest.
- Markiere im Menü Text auf der rechten Seite den Text.
- Verwende das Drop-down-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.
- Wenn du mit deinen Änderungen zufrieden bist, klicke auf Veröffentlichen, um sie zu aktivieren.
Beeinträchtigung der Website-Schriftart durch Klaviyo.js
Klaviyo aktives On site tracking (Klaviyo.js), muss manuell oder über deine E-Commerce-Integrationen installiert werden, damit du Klaviyo-Anmeldeformulare auf deiner Website veröffentlichen kannst. Wenn du nur einige Varianten der Schriftart geladen hast, lädt Klaviyo.js die verbleibenden Varianten in deiner Bibliothek, wenn es in deine Website eingefügt wird. Aus diesem Grund können die Schriftarten auf deiner Website in diesem Prozess leicht bearbeitet werden, z. B. durch eine Änderung der Schriftstärke der Kopfzeile deiner Website.
Du hast zwei Optionen, die Änderungen von Klaviyo.js an Schriftarten rückgängig zu machen. Du kannst:
- Lösche die betreffenden Schriftarten aus deiner Klaviyo-Schriftartenbibliothek.
- Aktualisiere das CSS im Header deiner Website, damit es nicht überschrieben wird, wenn Klaviyo.js die zusätzlichen Varianten lädt.
Da die zweite Option fundierte CSS-Kenntnisse voraussetzt, musst du möglicherweise dein Entwicklerteam zurate ziehen. Klaviyo kann dich beim Anpassen des CSS deiner Website nicht unterstützen. Wir verfügen aber über ein umfangreiches Partnernetzwerk.