So hostest du eine benutzerdefinierte Schriftart auf deiner Website

Das wirst du lernen

Erfahre, wie du eine Schriftart, im Speziellen eine Schriftart, die nicht von Google oder Adobe gehostet wird, auf deine E-Commerce-Website hochladen und in deine Klaviyo Anmeldeformulare importieren kannst. Um eine importierte Schriftart in deinem Anmeldeformular zu verwenden, gibt es 2 Möglichkeiten:

1. Verwende die öffentliche Schriftart, die auf deiner Website gehostet wird.
2. Du hostest deine eigene Schriftart öffentlich und importierst sie mithilfe der URL in deine Anmeldeformulare.

Die Schriftart deiner Website verwenden

Zunächst kannst du ganz einfach die öffentliche URL deiner Website verwenden, um die Schriftart in Klaviyo hochzuladen.

1. Öffne deine Website.
2. Klicke mit der rechten Maustaste irgendwo auf deine Website. Je nachdem, welchen Browser du verwendest, wähle Untersuchen oder Element untersuchen aus dem Menü aus.
3. Klicke hier auf Network > Font (Chrome). Je nach Browser musst du eventuell stattdessen Netzwerkanalyse >Schriften (Firefox) oder Netzwerk >Schriftart (Edge) auswählen.
4. Aktualisiere die Seite.
   Dir wird nun eine Auflistung aller Schriftarten angezeigt. Wenn der Name der Schriftart nicht eingeblendet wird und du stattdessen eine Reihe von Zahlen und Buchstaben siehst, klicke auf die Registerkarte „Vorschau“ und entscheide, welche Schriftart du in deinem Anmeldeformular verwenden möchtest.
5. Klicke unter Name auf die Schriftart, die du importieren möchtest.
6. Öffne die Registerkarte „Header“.
7. Kopiere die URL der Schriftart, die du verwenden möchtest.
8. Navigiere in Klaviyo zu Inhalt > Bilder & Marke > Schriftarten.
9. Wähle Schriftart importieren aus.
10. Lade deine benutzerdefinierte Schriftart hoch, indem du die URL in das Feld Quelladresse einfügst.

Eine selbst gehostete Schriftart hochladen

Wenn die Schriftart nicht bereits öffentlich online gehostet ist, musst du die gewünschte Schriftart zunächst auf deinen Computer herunterladen. Klaviyo akzeptiert nur Schriftarten in den Dateiformaten WOFF, WOFF2, TTF, EOT oder SVG. Beim Herunterladen von Schriftarten aus dem Internet ist zudem Vorsicht geboten, da diese Malware enthalten können. Gehe nun wie folgt vor:

1. Lade die Schriftart in die Assets für deine E-Commerce-Website hoch. Das kannst du über den Code deiner Website tun.
2. Speichere die gemachten Einstellungen.

Weitere Informationen findest du im Help Center der jeweiligen E-Commerce-Plattform. Dort erfährst du, wie du deiner Website Assets hinzufügen kannst.

• Shopify
• BigCommerce

Sobald du die URL hast, gehe zurück zu Klaviyo und wähle Inhalt > Bilder & Marke > Schriftarten aus. Klicke von hier aus auf die Registerkarte Schriftart importieren und importiere deine Schrift.

Beeinträchtigung der Website-Schriftart durch Klaviyo.js

Das „Auf Seite aktiv“-Tracking (Klaviyo.js) von Klaviyo muss manuell oder über die E-Commerce-Integration installiert werden, damit du Klaviyo Anmeldeformulare auf deiner Website veröffentlichen kannst. Wenn du nur einige Varianten der Schriftart hochgeladen hast, lädt Klaviyo.js die verbleibenden Varianten automatisch in die Bibliothek hoch, sobald du sie in deine Website einbindest. Aus diesem Grund können die Schriftarten auf deiner Website bei diesem Prozess leicht verändert werden, z. B. durch die Verwendung eines größeren oder kleineren Headers auf der Website. 

Du hast zwei Optionen, die Änderungen von Klaviyo.js an Schriftarten rückgängig zu machen. Du kannst:

• die betreffenden Schriftarten aus deiner Klaviyo Schriftartenbibliothek löschen. 
• das CSS im Header deiner Website so ändern, dass 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, aber wir verfügen über ein umfangreiches Partnernetzwerk.

Zusätzliche Ressourcen

• So verwendest du benutzerdefinierte Schriftarten in Anmeldeformularen
• Kurs: Eine wirksame Akquisestrategie mit Anmeldeformularen erstellen
• So fügst du benutzerdefinierte Schriftarten zu E-Mail-Vorlagen hinzu