Beim Erstellen Ihres eigenen HTML-E-Mail-Designsystems möchten Sie möglicherweise eine benutzerdefinierte Schriftart verwenden, die über die standardmäßig verfügbaren hinausgeht. Wenn Sie mit Markenrichtlinien arbeiten, bei denen Sie eine benutzerdefinierte Schriftart verwenden müssen, ist es immer am besten, eine benutzerdefinierte Schriftart mit einer soliden Ausweichlösung zu verwenden.
Unterstützung durch E-Mail-Clients
Die erste Überlegung, die bei der Arbeit mit benutzerdefinierten Schriftarten zu berücksichtigen ist, ist, dass die Unterstützung durch E-Mail-Clients lückenhaft ist. Die folgenden E-Mail-Clients unterstützen benutzerdefinierte Schriftarten:
>Apfel
> MailiOS
> MailSamsung
>MailOutlook.com
Es ist wichtig, einen Schriftarten-Stack zu definieren, wenn Sie benutzerdefinierte Schriftarten verwenden. Dies sollte einige standardmäßige System-Schriftarten umfassen, um sicherzustellen, dass Ihre E-Mail in Clients, die keine benutzerdefinierten Schriftarten unterstützen, korrekt dargestellt wird.
'OpenSansBold', Helvetica, Arial, sans-serif
Um Ihre benutzerdefinierten Schriftarten zu hosten, können Sie entweder einen Dienst wie Google Fonts verwenden oder sie selbst hosten. Wir können sie auch für unsere Kunden hosten - wir müssen einen Nachweis Ihrer Lizenz sehen, bevor wir dies tun können.
Für Situationen, in denen Ihre benutzerdefinierten Schriftarten nicht unterstützt werden, sollten Sie Fallbacks auswählen, die auf den meisten Computern vorhanden sind. Diese Fallbacks definieren, welche Schriftarten angezeigt werden, wenn der E-Mail-Client benutzerdefinierte Schriftarten nicht unterstützt.
CSS-Setup
Der zuverlässigste Weg, eine spezifische Schriftart in Ihre E-Mail einzubinden, ist die Verwendung von @font-face. Unten finden Sie ein Beispiel dafür in Aktion:
<style> @font-face { font-family: 'Festive', cursive; src: url('https://fonts.googleapis.com/css2?family=Festive&display=swap') } * { font-family: 'Festive', cursive; } </style>
Beim Arbeiten mit Outlook müssen wir diese @font-face in einem @media-Tag einbinden. Dies liegt daran, dass Outlook 2007, 2010 und 2017 sie nicht unterstützen.