So fügst du benutzerdefinierte Schriftarten zu E-Mail-Vorlagen hinzu

Übersicht

Erfahre, wie du neue Schriftarten zum E-Mail-Vorlagen-Editor von Klaviyo hinzufügst, damit deine E-Mails zu deinem Markenstil passen. In diesem Artikel erfährst du auch, welche Nachteile benutzerdefinierte Schriftarten mit sich bringen und wie du eine Schriftart wählst, die von möglichst vielen E-Mail-Anbietern unterstützt wird. 

In deiner E-Mail kannst du Google Fonts, Adobe Typekit oder importierte (d. h. selbst gehostete) Schriftarten verwenden. Beachte jedoch, dass nur bestimmte E-Mail-Postfächer benutzerdefinierte Schriftarten unterstützen und viele gängige Clients (wie Gmail und Yahoo) dies nicht tun. 

Wichtige Begriffe

• Benutzerdefinierte Schriftart
  Jede Schriftart, die nicht standardmäßig im Klaviyo-Editor enthalten ist 
• Web-Schriftart
  Eine benutzerdefinierte Schriftart, die von einer externen Quelle geladen werden muss 
• 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 in Posteingängen verwendet wird, die deine benutzerdefinierte Schriftart nicht unterstützen.

Unterstützung und Einschränkungen benutzerdefinierter Schriftarten

Benutzerdefinierte Schriftarten können dazu beitragen, dass dein Marketing kohärent bleibt und deine E-Mail-Inhalte auf deine E-Commerce-Website abgestimmt sind. Web-Schriftarten (d. h. Schriftarten, die von einer externen Quelle geladen werden und nicht auf dem Gerät gespeichert sind) werden jedoch möglicherweise nicht auf allen Geräten oder E-Mail-Clients wie erwartet dargestellt. Die Standardschriftarten von Klaviyo sind auf den meisten Computern und Geräten vorinstalliert, sodass du allen Abonnent*innen ein einheitliches Erlebnis bieten kannst. 

Zu den E-Mail-Clients, die Web-Schriftarten unterstützen, gehören:

• Apple Mail
• iOS Mail (der Standard-E-Mail-Browser auf iOS)
• Google Android (außer Android 2.3, das die @import-Methode, die von Google und Adobe Fonts verwendet wird, nicht unterstützt)
• Samsung Mail (Android 8.0)
• Outlook für Mac

Benutzerdefinierte Schriftarten in Google Mail und anderen nicht unterstützten Posteingängen

Empfänger*innen, die Google Mail (oder andere Clients, die keine benutzerdefinierten Schriftarten unterstützen) verwenden, sehen möglicherweise die Fallback-Schriftart (die du in der E-Mail-Vorlage festlegen kannst) und nicht deine gewählte benutzerdefinierte Schriftart. Um dies zu vermeiden, solltest du eine websichere benutzerdefinierte Schriftart wählen, die auf den meisten Geräten verfügbar ist – unabhängig von deren Unterstützung für Web-Schriftarten. 

Hier findest du websichere Schriftarten sowie eine Aufschlüsselung der Unterstützung nach Geräten. 

Eine neue benutzerdefinierte Schriftart zum E-Mail-Vorlagen-Editor hinzufügen 

So fügst du einer E-Mail-Vorlage eine benutzerdefinierte Schriftart hinzu: 

1. Öffne einen Textblock oder die Registerkarte Stile in der Vorlage.
2. Klicke unten in der Drop-down-Liste der Schriftarten auf Schriftart hinzufügen.
3. Wähle in dem daraufhin angezeigten Modalfenster Google Font, Adobe Font oder Schriftart importieren, je nach Quelle deiner Schriftart.
4. Folgen den Schritten in den folgenden Abschnitten für deine Schriftart (Google, Adobe oder hochgeladen).

Wenn du eine Schriftart zu einer E-Mail-Vorlage hinzugefügt hast, kannst du sie auch für alle anderen Vorlagen sowie für Anmeldeformulare nutzen.

Zusätzliche Varianten zu einer bestehenden benutzerdefinierten Schriftart hinzufügen

Die ausgewählten Varianten für benutzerdefinierte Schriftarten kannst du jederzeit unter Markenbibliothek > Schriftarten bearbeiten, löschen oder aktualisieren.

Eine vorhandene Schriftart aktualisieren

So wählst du zusätzliche Varianten für eine benutzerdefinierte Google-Schriftart oder eine importierte Schriftart, die du bereits hinzugefügt hast: 

1. Gehe in Klaviyo zu  Inhalt > Bilder und Marke.
2. Klicke auf Schriftarten.
3. Suche die Schriftart, die du bearbeiten möchtest, unter Deine Schriftarten. 
4. Klicke in der Karte dieser Schriftart auf die drei Punkte in der oberen rechten Ecke.
5. Klicke im angezeigten Menü auf Bearbeiten. 
6. Klicke auf # Schriftvarianten ausgewählt, um die Liste der Schriftartvarianten zu erweitern. 
7. Wähle alle zusätzlichen Varianten aus, die du hinzufügen möchtest.
8. Klicke auf Schriftart aktualisieren.

Bei Adobe-Schriftarten kannst du nach dem Hochladen keine Varianten mehr hinzufügen, da die Varianten in deinem Typekit-Link integriert sind.   

Wenn du die Fehlermeldung Eine Schriftart mit diesem Namen existiert bereits erhältst, gehe wie oben beschrieben vor, um die vorhandene Version der Schriftart zu bearbeiten, anstatt sie erneut hinzuzufügen. 

Eine Schriftart löschen

1. Gehe in Klaviyo zu  Inhalt > Bilder und Marke.
2. Klicke auf Schriftarten.
3. Suche die Schriftart, die du bearbeiten möchtest, unter Deine Schriftarten. 
4. Klicke in der Karte dieser Schriftart auf die drei Punkte in der oberen rechten Ecke.
5. Klicke im angezeigten Menü auf Löschen. 

Alle Nachrichten in Klaviyo, die derzeit die benutzerdefinierte Schriftart verwenden, werden sofort auf die Fallback-Schriftart umgestellt. Wenn du die Schriftart wieder hinzufügst, wird sie auch in diesen E-Mails wieder verwendet. 

Eine Google-Schriftart hinzufügen

So fügst du eine Google-Schriftart hinzu:

1. Gib den Namen der Google-Schriftart ein, die du verwenden möchtest.
2. Wähle eine Ersatzschriftart aus.
3. Klicke auf Schriftart hinzufügen. 

Eine Adobe-Schriftart hinzufügen

Adobe-Schriftarten sind nur für Benutzer mit einem aktiven Adobe Fonts-Abonnement verfügbar. So fügst du eine Adobe-Schriftart hinzu:

1. Klicke auf Adobe Font.
2. Füge deine CSS-Adresse ein. Die Adresse muss diesem Format entsprechen: https://use.typekit.com/123ABC.
3. Wähle eine Ersatzschriftart aus.
4. Klicke auf Schriftart hinzufügen. 

Eine importierte Schriftart hinzufügen

Importierte Schriftarten, manchmal auch selbst gehostete Schriften genannt, werden nur für Absender empfohlen, die Unterstützung durch Entwickler*innen haben. Du kannst die Schriftdatei nicht direkt auf Klaviyo hochladen. Wenn du kein Entwicklerteam hast, findest du bei Google oder Adobe am besten eine Schriftart, die deiner gewünschten Schriftart ähnlich ist. 

So verwendest du eine importierte Schriftart:

1. Hoste die Schriftart entweder auf deinen Servern oder über einen entsprechenden Hosting-Dienst. Stelle sicher, dass du das Cross-Origin Resource Sharing (CORS) aktivierst, indem du den Access-Control-Allow-Origin-Header auf * setzt, damit die Schriftart in den Postfächern deiner Empfänger zugänglich ist. Erfahre mehr über CORS.
2. Wenn du die Schriftart erfolgreich gehostet hast, klickst du im Modal Schriftart hinzufügen auf Schriftart importieren und fügst die Hosting-URL in das Feld Quelladresse ein.
3. Gib den Namen, die Stärke und den Stil der Schriftart in die entsprechenden Felder ein.
4. Wähle eine Ersatzschriftart aus.
5. Klicke auf Schriftart hinzufügen. 

Über Fallback-Schriftarten

Bei allen benutzerdefinierten Schriftarten musst du eine Fallback-Schriftart auswählen. Diese Schriftart wird Empfänger*innen angezeigt, deren Clients deine benutzerdefinierte Schriftart nicht unterstützen. Wähle eine Schriftart aus der Liste der verfügbaren Optionen, die deiner benutzerdefinierten Schriftart ähnlich ist. 

Wenn du beispielsweise Poppins (eine Google Font) als benutzerdefinierte Schriftart und Arial als Fallback-Schriftart verwendest, werden E-Mail-Empfänger*innen die folgenden Schriftarten angezeigt: 

• Empfänger*innen, die deine E-Mail in einem Browser öffnen, der Web-Schriftarten unterstützt (z. B. Apple Mail, iOS Mail), sehen Poppins. 
• Empfänger*innen, die deine E-Mail in einem Browser öffnen, der keine Web-Schriftarten unterstützt (z. B. Google Mail), sehen Arial.

Eine benutzerdefinierte Schriftart anwenden

Wenn du eine benutzerdefinierte Schriftart eingerichtet hast, kannst du sie auf jeden beliebigen Text in deiner Vorlage anwenden, z. B.: 

• in deiner Stil-Hauptvorlage 
• in den Stilen eines beliebigen Blocks 
• in einem bestimmten Textabschnitt eines Textblocks 
• in Schaltflächenblöcken, Produktblöcken und allen anderen Blocktypen, die Text enthalten 

So wendest du eine benutzerdefinierte Schriftart in einem Textblock an:

1. Wähle den Textblock aus, der den Text enthält, auf den du die Schriftart anwenden möchtest.
2. Markiere den Text, auf den du die Schriftart anwenden möchtest.
3. Wähle die benutzerdefinierte Schriftart aus dem Drop-down-Menü aus. 

Für alle anderen Blocktypen oder für Block- und Vorlagenstile wählst du die Schriftart im entsprechenden Drop-down-Menü aus.

In Tabellenblöcken und geteilten Blöcken erscheint deine benutzerdefinierte Schriftart zwar im Canvas (z. B. in der Bearbeitungsvorschau), aber nicht im Panel auf der linken Seite. Im linken Panel wird deine Fallback-Schriftart anstelle der benutzerdefinierten Schriftart angezeigt. 

Benutzerdefinierte Schriftarten in der Vorschau anzeigen 

Wenn die Vorlage fertig ist: Sende dir selbst eine Vorschau-E-Mail, indem du auf Vorschau und Test > Test senden klickst. Öffne die Nachricht auf verschiedenen Geräten, um zu sehen, wie sie verschiedenen Empfänger*innen angezeigt wird. Du kannst auch ein Tool wie Email on Acid verwenden, um eine Vorschau für eine größere Anzahl von Geräten zu erstellen. 

Weitere Ressourcen

• Leitfaden für den E-Mail-Vorlagen-Editor
• Grundlegendes zu Schriftarten in E-Mails