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

Das wirst du lernen

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. 

Du kannst Google Fonts, Adobe Typekit oder importierte (d.h. selbst gehostete) Schriftarten in deiner E-Mail 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 
• Ersatzschriftart
  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 im Speicher des Geräts verfügbar 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 Ersatzschriftart (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 unabhängig von deren Unterstützung für Web-Schriftarten verfügbar ist. 

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

Eine neue benutzerdefinierte Schriftart in den Editor für E-Mail-Vorlagen einfügen 

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

1. Öffne einen Textblock oder die Registerkarte Formatvorlagen in der Vorlage.
2. Scrolle in der Dropdown-Liste der Schriftarten an das Ende der Liste und klicke auf Schriftart hinzufügen.
3. Wähle in dem daraufhin angezeigten Modal Google Font, Adobe Font oder Font importieren, je nachdem, woher deine Schrift stammt.
4. Geh wie in den folgenden Abschnitten beschrieben für die jeweilige Schriftart vor (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 Registrierungsformulare nutzen.

Zusätzliche Schriftartvarianten zu einer bestehenden benutzerdefinierten Schrift hinzufügen

Du kannst die ausgewählten Variationen für benutzerdefinierte Schriftarten 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, aus: 

1. Rufe Inhalt > Bilder und Marke in Klaviyo auf.
2. Klicke auf Schriftarten.
3. Suche die Schriftart, die du bearbeiten möchtest, unter Meine 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 # ausgewählte Schriftartvarianten, 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.

Du kannst keine Varianten zu einer Adobe-Schriftart hinzufügen, nachdem du sie hochgeladen hast, da die Varianten in deinen Typekit-Link integriert sind.   

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

Eine Schriftart löschen

1. Rufe Inhalt > Bilder und Marke in Klaviyo auf.
2. Klicke auf Schriftarten.
3. Suche die Schriftart, die du bearbeiten möchtest, unter Meine 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 Ersatzschriftart umgestellt. Wenn du die Schriftart wieder hinzufügst, wird sie auch in diesen E-Mails wieder verwendet. 

Google Fonts

Um eine Google Font hinzuzufügen, gibst du einfach den Namen der Google Font ein, die du verwenden möchtest. Wähle eine Ersatzschriftart und klicke dann auf Schriftart hinzufügen. 

Adobe Fonts

Adobe Fonts sind nur für Benutzer*innen mit einem aktiven Adobe Fonts-Abonnement verfügbar. Um eine Adobe Font hinzuzufügen, klickst du auf Adobe Font und fügst die entsprechende CSS-Adresse ein. Die Adresse sollte diesem Format entsprechen: https://use.typekit.com/123ABC

Wähle eine Ersatzschriftart und klicke auf Schriftart hinzufügen. 

Importierte Schriftarten

Importierte Schriftarten, manchmal auch selbst gehostete Schriften genannt, werden nur für Absender mit einem Entwicklungsteam empfohlen. 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. 

Um eine importierte Schriftart zu verwenden, musst du die Schriftart zunächst hosten, entweder auf deinen Servern oder über einen entsprechenden Hosting-Dienst. Stell sicher, dass du die herkunftsübergreifende Ressourcennutzung (CORS) aktivierst, indem du den Access-Control-Allow-Origin-Header auf * setzen. Dann kann die Schriftart vom E-Mail-Client der Empfänger*innen abgerufen werden. Erfahre hier mehr über CORS. 

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. Gib den Namen, das Gewicht und den Stil der Schriftart in die entsprechenden Felder ein. 

Wähle im letzten Schritt eine Ersatzschriftart und klicke auf Schriftart hinzufügen. 

Über Ersatzschriftarten

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

Wenn du beispielsweise Poppins (eine Google Font) als benutzerdefinierte Schriftart und Arial als Ersatzschriftart 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, einschließlich: 

• 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 

Markiere in einem Textblock den Text, auf den du die Schriftart anwenden möchtest, und wähle dann die benutzerdefinierte Schriftart aus der Dropdown-Liste aus. 

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

In den Tabellen Block und Geteilter Block erscheint deine benutzerdefinierte Schriftart zwar 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. 

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 nachzuvollziehen, wie sie bei verschiedenen Empfänger*innen ankommt. Du kannst auch ein Tool wie Email on Acid verwenden, um eine Vorschau für eine größere Anzahl von Geräten zu erstellen. 

Zusätzliche Ressourcen

• Anleitung zum Editor für E-Mail-Vorlagen
• Schriftarten in E-Mails verstehen