So hostest du eine benutzerdefinierte Schriftart auf deiner Website
Übersicht
Erfahre, wie du 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 zwei Möglichkeiten:
- Verwende die öffentliche Schriftart, die auf deiner Website gehostet wird.
- Du hostest deine eigene Schriftart öffentlich und importierst sie mithilfe der URL in deine Anmeldeformulare.
In diesem Artikel erfährst du, wie du eine benutzerdefinierte Schriftart auf deine E-Commerce-Website hochlädst, um sie in Formularen zu verwenden. Wir befassen uns jedoch nicht damit, wie du sie in E-Mail-Vorlagen verwendest. Informationen zum Hinzufügen von benutzerdefinierten Schriftarten zu E-Mail-Vorlagen findest du in unserem Artikel über benutzerdefinierte Schriftarten in E-Mail-Vorlagen.
Die Schriftart deiner Website verwenden
Zunächst kannst du einfach die öffentliche URL deiner Website verwenden, um die Schriftart in Klaviyo hochzuladen.
Hinweis: Diese Methode zum Hosten einer benutzerdefinierten Schriftart wird bei Shopify-Shops nicht unterstützt.
- Öffne deine Website.
- Klicke mit der rechten Maustaste auf eine beliebige Stelle deiner Website. Je nachdem, welchen Browser du verwendest, wähle Untersuchen oder Element untersuchen aus dem Menü aus.
- Klicke hier auf Network (Netzwerk) > Fonts (Schriftarten).
- Aktualisiere die Seite.
Dir wird nun eine Auflistung aller Schriftarten angezeigt. Wenn der Name der Schriftart nicht erscheint 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. - Klicke unter Name auf die Schriftart, die du importieren möchtest.
- Öffne die Registerkarte Header.
- Kopiere die URL der Schriftart, die du verwenden möchtest.
- Navigiere in Klaviyo zu Inhalt > Bilder und Marke > Schriftarten.
- Wähle Schriftart importieren aus.
- 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:
- Lade die Schriftart in die Assets für deine E-Commerce-Website hoch. Das kannst du über den Code deiner Website tun.
- Speichere die gemachten Einstellungen.
Weitere Informationen findest du im Help Center der jeweiligen E-Commerce-Plattform. Dort erfährst du, wie du zu deiner Website Assets hinzufügen kannst.
Sobald du die URL hast, gehe zurück zu Klaviyo und wähle Inhalt > Bilder und Marke > Schriftarten aus. Klicke von hier aus auf die Registerkarte Schriftart importieren und importiere deine Schrift.
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.