Verwendung von benutzerdefinierten Schriftarten im Email Builder

Wenn Sie Ihr eigenes HTML-E-Mail-Designsystem erstellen, möchten Sie möglicherweise eine benutzerdefinierte Schriftart verwenden, die über die standardmäßig verfügbaren Schriftarten hinausgeht.
Wenn Sie mit Brand Guidelines arbeiten, bei denen eine bestimmte Schriftart vorgeschrieben ist, ist es immer am besten, eine benutzerdefinierte Schriftart mit einem robusten Fallback zu verwenden.

Unterstützung durch E-Mail-Clients

Die erste Überlegung bei der Verwendung benutzerdefinierter Schriftarten ist, dass die Unterstützung durch E-Mail-Clients lückenhaft ist.
Die folgenden E-Mail-Clients unterstützen benutzerdefinierte Schriftarten:

• Apple Mail

• iOS Mail

• Samsung Mail

• Outlook.com

Es ist wichtig, eine Schriftart-Stack zu definieren, wenn Sie benutzerdefinierte Schriftarten verwenden. Dies sollte einige Standard-Systemschriftarten enthalten, damit Ihre E-Mail auch in Clients korrekt dargestellt wird, die benutzerdefinierte Fonts nicht unterstützen.

Beispiel einer Schriftart-Stack:

'OpenSansBold', Helvetica, Arial, sans-serif

Hosting der Schriftarten

Um Ihre benutzerdefinierten Schriftarten zu hosten, können Sie entweder einen Service wie Google Fonts verwenden oder sie selbst hosten.
Wir können die Fonts auch für unsere Kunden hosten – dafür müssen wir den Lizenznachweis sehen, bevor wir dies tun können.

Fallback-Schriften

Für Situationen, in denen Ihre benutzerdefinierten Schriftarten nicht unterstützt werden, sollten Sie Fallbacks auswählen, die auf den meisten Computern verfügbar sind.
Diese Fallbacks definieren, welche Schriftarten angezeigt werden, wenn der E-Mail-Client die benutzerdefinierten Fonts nicht unterstützt.

CSS-Einrichtung

Die zuverlässigste Methode, um eine bestimmte Schriftart in Ihre E-Mail einzubinden, ist die Verwendung von @font-face.

Beispiel:

<style>
@font-face {
  font-family: 'Festive', cursive;
  src: url('https://fonts.googleapis.com/css2?family=Festive&display=swap');
}
* {
  font-family: 'Festive', cursive;
}
</style>

Hinweis zu Outlook

Beim Arbeiten mit Outlook muss dieses @font-face in einem @media-Tag eingebettet werden.
Grund: Outlook 2007, 2010 und 2017 unterstützen @font-face nicht direkt.