Custom Fonts in Customer Insights für E-Mails und Formulare nutzen

Eine Custom Font in Customer Insights Journeys zu nutzen, ist eine großartige Möglichkeit, einen einzigartigen visuellen Stil und eine Markenidentität zu schaffen, die aus der Masse heraussticht. Microsoft hat vor Kurzem die Möglichkeit hinzugefügt, neben den Standard-Fonts auch Custom Fonts in E-Mails und Formularen zu verwenden. Das Hinzufügen ist einfach, aber es gibt ein paar Dinge zu beachten. Gerade Fonts in E-Mails können ein paar Fallstricke mitbringen. In diesem Artikel zeige ich dir, was Custom Fonts sind, worauf du achten solltest und wie du sie in Customer Insights Journeys nutzen kannst.

Wie funktionieren Fonts?

Dein E-Mail-Code legt die Schriftart über eine CSS-Eigenschaft namens font-family fest. Diese font-family-Eigenschaft kann entweder nur einen Fontnamen oder mehrere enthalten – oft als Font Stack bezeichnet. Mehrere Fontnamen sorgen dafür, dass eine von dir gewählte Backup-Schrift genutzt wird, falls eine Custom Font nicht verfügbar ist. Andernfalls entscheidet der E-Mail-Client selbst, welche Ersatzschrift er nimmt. Die Standardversion von Customer-Insights-E-Mails verwendet sogenannte Web Safe Fonts. In CSS sieht das zum Beispiel so aus:

<style>
        body {
            font-family: Arial, Verdana, sans-serif;
            font-size: 14px;
            color: rgb(0, 0, 0);
            background-color: rgb(255, 255, 255);
        }
</style>

Aber was macht eine Custom Font aus?

Was ist der Unterschied zwischen Web Safe Fonts und Web Fonts?

Dafür musst du zuerst den Unterschied zwischen Web Safe Fonts und Web Fonts verstehen. Auch wenn die Namen ähnlich klingen, steckt dahinter ein großer Unterschied.

Web Safe Fonts:

• Web Safe Fonts sind Schriftarten, die auf den meisten Betriebssystemen und Geräten verfügbar sind.
• Sie gelten als „safe“, weil sie sehr wahrscheinlich auf dem Rechner der Nutzer:innen installiert sind und eine konsistente Darstellung ermöglichen, selbst wenn die gewünschte Schrift nicht verfügbar ist.
• Typische Web Safe Fonts sind Arial, Helvetica, Times New Roman, Georgia, Courier New und Verdana.
• Web Safe Fonts helfen dabei, ein einheitliches Erscheinungsbild über verschiedene Plattformen hinweg sicherzustellen.

Web Fonts:

• Web Fonts hingegen sind benutzerdefinierte Schriftarten, die nicht standardmäßig auf den Geräten der Nutzer:innen installiert sind.
• Sie geben Designer:innen mehr Freiheit und ermöglichen einzigartige Designs.
• Web Fonts werden aus externen Quellen geladen, häufig über Dienste wie Google Fonts oder Adobe Fonts, und beim Besuch einer Website auf das Gerät heruntergeladen.
• Das Risiko ist höher, dass die Schrift nicht sauber lädt. Eine Fallback-Schrift aus den Web Safe Fonts ist deshalb wichtig.

Da die Unterstützung von Web Fonts je nach E-Mail-Client sehr unterschiedlich ist, lohnt es sich zu analysieren, womit deine Abonnent:innen ihre E-Mails typischerweise öffnen. Wenn die Mehrheit einen Client nutzt, der Web Fonts unterstützt, probier es aus. Wenn deine Zielgruppe hauptsächlich einen Client ohne Web-Font-Support nutzt, kannst du dir Zeit und Aufwand sparen. Und leider ist die Liste der Clients, die Web Fonts in E-Mails unterstützen, sehr klein: Hier findest du eine Übersicht (Link).

Was ist sonst noch wichtig bei Custom Fonts?

Wenn du Custom Fonts nutzen möchtest, solltest du vorher noch ein paar weitere Dinge bedenken:

1. Lizenzen: Es gibt unterschiedliche Anbieter für Web Fonts. Google ist zum Beispiel kostenlos (Link), während Adobe einige Fonts in der Creative-Cloud-Subscription inkludiert.
2. Barrierefreiheit: Suche eine Schrift, die gut zu deiner Marke passt und trotzdem gut lesbar und zugänglich ist. Sehr dekorative oder verschnörkelte Schriften sind zum Beispiel für Menschen mit Dyslexie oder Sehbeeinträchtigungen schwer zu lesen.

Custom Fonts in Customer Insights einfügen

Ich nutze eine Font-Family von Google. Ich lade diese auf der Google-Fonts-Seite herunter und bekomme eine ZIP-Datei, die ich entpacke. Der Ordner enthält viele .ttf-Dateien, die den Font definieren – zum Beispiel, wie er in Bold, Normal oder Italic aussieht.

Neben ttf gibt es auch andere Formate wie .eot, .woff, .woff2 und .svg. Die Formate .woff und .woff2 sind am kompatibelsten für E-Mails. Microsoft empfiehlt deshalb, wenn möglich eines oder beide dieser Formate für E-Mails zu verwenden.

Custom Fonts im Customer-Insights-Brand-Profile hinterlegen

Fonts werden in Customer Insights zu E-Mails, Formularen oder Brand Profiles hinzugefügt. In meinem Beispiel füge ich die neuen Google Fonts in mein Brand Profile ein.

Du kannst entweder eine bereits hochgeladene Datei aus der Library auswählen, eine neue Datei hochladen oder einen Font über eine URL verwenden. Du findest die Fonts später in der Library ebenfalls unter Images und Videos.

Wenn du den neuen Font hochlädst, wähle nur die ttf-Dateien aus, die du wirklich brauchst.

Anschließend kannst du den Font auch noch genauer spezifizieren und Weight und Style ergänzen. Das ist kein Muss, fügt aber die Details automatisch in den Namen des Fonts ein.

Custom Font in Customer-Insights-E-Mails und -Formularen verwenden

Jetzt kann ich den Font auch in E-Mails und Formularen auswählen.

Ich kann in E-Mails mein Brand Profile auswählen und sehe dann meine neuen Fonts im Designer. Sobald ich Text in eine E-Mail einfüge, habe ich in der Toolbar die Option, neben den Standard-Fonts auch meine eigenen Fonts zu verwenden.

Wie oben beschrieben, können nur sehr wenige E-Mail-Clients Web Fonts laden. Wenn du sie trotzdem nutzen willst, stelle sicher, dass du im HTML eine Fallback-Schrift (Web Safe Font) definierst.

In Formularen ist das etwas einfacher – auch wenn es dort keine Brand Profiles gibt. Im Designer-Tab werden Custom Fonts aber auf die gleiche Weise hinzugefügt wie im Brand Profile. Dort definiere ich die Schrift auch global für alle Feldnamen und Platzhalter, sonst müsste ich es manuell für jedes Feld im Formular setzen.

Fallback für Custom Font definieren

Neue @font-face-Klassen mit den Custom Fonts sind automatisch Teil des CSS der E-Mail. Dort ist auch eine font-display: swap-Angabe enthalten. Der Wert swap weist den Browser an, die Fallback-Schrift zu verwenden, bis die Custom Font vollständig heruntergeladen ist.

Damit der E-Mail-Client die richtige Fallback-Schrift auswählt, passe ich das CSS an. Dafür ergänze ich den Namen der Custom Font in den font-family-Einstellungen der jeweiligen Klassen.

Ohne Fallback

Mit Fallback

Das CSS im E-Mail-HTML sieht dann zum Beispiel so aus (ich habe es etwas gekürzt):

<style>
@font-face {
      font-family: AsapCondensed-Black;
      font-weight: 900;
      font-display: swap;
      src: url(https://assets-usa.mkt.dynamics.com/... );
        }
@font-face {
      font-family: AsapCondensed-Regular;
      font-weight: 400;
      font-style: italic;
      font-display: swap;
      src: url(https://assets-usa.mkt.dynamics.com/... );
        }
...

body {
     font-family: AsapCondensed-Regular, Arial, Verdana, sans-serif;
     font-size: 14px;
     color: rgb(0, 0, 0);
     background-color: rgb(255, 255, 255);
        }

a {
     font-family: AsapCondensed-Regular, Arial, Verdana, sans-serif;
     font-size: 14px;
     font-weight: normal;
     color: rgb(0, 130, 221);
     text-decoration: none;
        }
h1 {
     color: rgb(0, 0, 0);
     font-size: 34px;
     font-weight: normal;
     font-family: AsapCondensed-Black, Arial, Verdana, sans-serif;
     text-align: left;
        }
...

p {
     font-family: AsapCondensed-Regular, Arial, Verdana, sans-serif;
     font-size: 14px;
     color: rgb(0, 0, 0);
     font-weight: normal;
     text-align: left;
        }
</style>

Ich kann dir nur empfehlen, die Text-Styles in der E-Mail und im Formular zu pflegen oder sie in einem Brand Profile zu hinterlegen. Das macht die Erstellung so viel einfacher: Die Texte haben einen definierten Standard und das Fallback-CSS funktioniert zuverlässig. Ich habe es mit Outlook und Gmail auf Desktop und Mobile getestet.

Zusammenfassung

Web Fonts sind eine tolle Möglichkeit, die Texte in deinen E-Mails und Formularen markenspezifisch und trotzdem gut lesbar zu gestalten. Wie du in diesem Artikel siehst, gibt es dabei aber viele Feinheiten zu beachten. Denk vor allem an Lizenzen und Barrierefreiheit, wenn du Custom Fonts in Customer Insights für E-Mails und Formulare nutzen willst. Und leider sind Web Fonts in E-Mail-Clients nur selten verfügbar – bei Formularen im Browser ist das eine andere Sache. Da Customer Experience und Wiedererkennbarkeit konsistent sein sollten, empfehle ich – gerade im B2B – Web Safe Fonts zu verwenden. Der am häufigsten genutzte E-Mail-Client ist Outlook, und wer viel mit E-Mails arbeitet, weiß: Outlook reagiert auf HTML manchmal … interessant. Deshalb ist das Wichtigste:

Immer! Testen!

Trotzdem: Ich finde die Funktion für Custom Fonts in Customer Insights leicht zu nutzen – und sie macht die Welt der Formulare und E-Mails ein bisschen schöner.

Hast du Fragen, Ideen oder Anmerkungen? Meld dich gern.