Der ultimative Leitfaden für Web-Schriftarten

In der Vergangenheit war es nie besonders schwer, die richtige Schriftart für Ihre E-Mail auszuwählen, da es nur eine begrenzte Anzahl von sicheren Web-Schriftarten zur Auswahl gab. Aber die Dinge haben sich geändert. Immer mehr E-Mail-Designer gehen über die Grenzen hinaus und nutzen dieselben Entwicklungstechniken, die Webdesigner schon seit Jahren anwenden: die Verwendung von Webfonts in ihren E-Mails.

Webfonts ermöglichen Webdesignern einen kreativeren Umgang mit ihrer Typografie, da sie in ihren Entwürfen auch nicht standardisierte Schriftarten verwenden können.

Wie immer, wenn es darum geht, neue Wege in der E-Mail-Gestaltung und -Entwicklung zu beschreiten, gehörten vorausschauende Mitglieder der Community zu den ersten, die diese Techniken in unsere Posteingänge (und unsere Aufmerksamkeit) brachten. Wir danken Campaign Monitor für seinen fantastischen Leitfaden zu Webfonts, Paul Airys „A Type of Email“ und Style Campaign für ihre Inspiration.

Im ultimativen Leitfaden zu Webfonts gehen wir im Detail darauf ein, was Webfonts sind und wie E-Mail-Designer sie in ihren E-Mails einsetzen können.

Was ist eine Web-Schriftart?

Es gibt zwei verschiedene Arten von Schriftarten, die E-Mail-Designern für ihre E-Mails zur Verfügung stehen – websichere Schriftarten und Web-Schriftarten. Hier ist der Unterschied zwischen den beiden:

• Websichere Schriftarten
  Denken Sie an Arial, Times New Roman, Verdana oder Georgia als Paradebeispiele für websichere Schriftarten. Sie sind die Standardschriftarten, die auf den meisten Betriebssystemen und Geräten zu finden sind.

• Web-Schriftarten
  Web-Schriftarten gehören nicht zu den Standard-Schriftarten, die auf verschiedenen Geräten und Betriebssystemen verfügbar sind, und sind speziell für die Verwendung auf Websites konzipiert und lizenziert. Ein paar Web-Schriften, die Sie vielleicht kennen, sind Open Sans und Roboto.

Warum Web-Schriften?

Als Vermarkter und Designer wissen Sie, wie wichtig es ist, in E-Mails mit Farben, Design und – ja – Typografie markenkonform zu bleiben. Wichtige Texte in Bildern zu verstecken, ist eine gängige Praxis im E-Mail-Design, um die Marke zu wahren und kreativ zu sein. Aber das „Verstecken“ von Text in Bildern schränkt die Zugänglichkeit der E-Mail ein, da Bildschirmlesegeräte den Text auf dem Bild nicht lesen können.

Webfonts eröffnen neue Wege der Kreativität in der Typografie, die es E-Mail-Designern ermöglichen, kreativ und zugänglich zu sein – und dabei das Erscheinungsbild ihrer Marke beizubehalten.

E-Mail- und Webfonts

Während Webfonts keine universelle Unterstützung haben, sind hier die E-Mail-Clients, in denen sie unterstützt werden:

• Apple Mail
• iOS Mail
• Google Android
• Samsung Mail (Android 8.0)
• Outlook für Mac
• Outlook App

Die Liste der unterstützten E-Mail-Clients mag kurz aussehen, aber seien Sie beruhigt – die meisten von ihnen gehören zu den 10 beliebtesten E-Mail-Clients. Das ist ein Grund zur Freude!

*Pro-Tipp: Im April 2018 veröffentlichte Gmail eine aktualisierte Oberfläche für seinen Webmail-Client. Diese neue Oberfläche verwendet zwei beliebte Web-Schriftarten: Google Sans und Roboto. Was bedeutet das? Obwohl Gmail keine Webschriften unterstützt, werden diese Schriften in Gmail dargestellt, wenn Sie eine dieser Webschriften in Ihren E-Mails verwenden. Fügen Sie die Schriftarten einfach zu Ihrem CSS-Attribut font-family hinzu, wenn Sie sie in Ihrer E-Mail verwenden möchten.

Entdecken Sie Ihre Top 10 Beim E-Mail-Marketing dreht sich alles um Ihre Zielgruppe. Nutzen Sie Litmus Email Analytics, um herauszufinden, welche E-Mail-Clients bei Ihren Abonnenten am beliebtesten sind. Melden Sie sich kostenlos an! Entdecken Sie Ihre Zielgruppe →

Wie Sie Web-Schriftarten in E-Mails einbetten

Es gibt drei Hauptansätze, die Sie bei der Verwendung von Web-Schriftarten in Ihren E-Mails anwenden können.

@import

Die Verwendung von @import ist einer der einfacheren Ansätze für den Import von Web-Schriftarten in E-Mails. Fügen Sie die folgende Codezeile in den <Kopf> Ihrer E-Mail ein, in der Regel oben im <Stil>.

@import url('https://fonts.googleapis.com/css?family=Montserrat');

In diesem Beispiel lautet der Name der importierten Schriftfamilie „Montserrat“.

Die benötigte URL erhalten Sie von Ihrem Web-Font-Service. Wenn Sie die Schriftart selbst hosten, müssen Sie die URL auf den Ort verweisen, an dem sich Ihre Web-Schriftartdatei befindet.

Diese Methode wird von den meisten der oben genannten E-Mail-Clients gut unterstützt und wird nur von Android 2.3 (Android Gingerbread) nicht unterstützt – einer alten Android-Version, deren Marktanteil verschwindend gering ist.

<link>

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">

Gleich wie bei der @import-Methode definiert Ihr Web-Schriftartdienst den href-Wert. Wenn Sie die Schriftdatei selbst hosten, ändern Sie diese URL so, dass sie auf den Ort verweist, an dem sich die Webschriftart auf Ihrem Server befindet. Und Sie sollten diese Codezeile im <Kopf> Ihrer E-Mail platzieren, in der Nähe des Kopfes.

Die <link>-Methode funktioniert etwas besser als die @import-Methode und wird von allen oben genannten E-Mail-Clients unterstützt (hurra!).

Warum sollten Sie also eine Methode der anderen vorziehen? Die @import-Methode verzögert das Laden der importierten Webschrift, bis der HTML-Code, in den sie eingebettet ist, vollständig geladen ist. Das kann dazu führen, dass die Webschrift etwas länger braucht, um in der E-Mail zu erscheinen, während der Rest der E-Mail geladen wird. Umgekehrt lädt die <link>-Methode die Ressource inline, wenn der Code der HTML-Datei gelesen wird (von oben nach unten), was das Laden Ihrer E-Mail verzögern kann, wenn Ihre Webfont-Datei besonders groß ist.

@font-face

Online-Webfont-Dienste bieten in der Regel fünf Dateiformate zur Auswahl an: .eot, .woff, .woff2, .svg und .ttf. Das .woff-Format bietet die beste Unterstützung für den E-Mail-Versand, daher empfehlen wir, dieses Format zu verwenden, wenn es möglich ist. Die @font-face-Methode ist die einzige Methode, bei der Sie gezielt auswählen können, welches Dateiformat Sie importieren möchten, was sie zur sichersten Methode für die Implementierung von Webschriften macht.

Hier ist eine typische @font-face-Deklaration für den Import einer Web-Schriftart in eine E-Mail unter Verwendung von Google Fonts als dem von uns gewählten Web-Schriftarten-Dienst:

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: 400;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');}

Bei der Verwendung von Google Fonts ist es leider nicht so einfach, die URL einer Web-Schriftart zu finden – es gibt ein paar Hürden, die Sie überwinden müssen.

1. Suchen Sie nach der Webschriftart, die Sie verwenden möchten.
Wenn Sie sie gefunden und ausgewählt haben, erscheint am unteren Rand des Bildschirms ein kleiner schwarzer Balken. Wenn Sie darauf klicken, sehen Sie einen Bildschirm wie diesen:

2. Kopieren Sie die URL der Webschriftart (oben hervorgehoben) und fügen Sie sie in die Adressleiste von Safari oder Internet Explorer ein.
Wir verwenden Safari oder Internet Explorer für diese Methode, da Google Fonts die Browsererkennung nutzt, um zu entscheiden, welcher Schriftdateityp verwendet wird. Für diese Methode wollen wir den Dateityp .woff verwenden. Bei Verwendung von Google Chrome wird der .woff2-Schriftdateityp im Browser angezeigt, der nur eine begrenzte Unterstützung bietet. Vielen Dank an Elliot Ross für diesen zusätzlichen Einblick!

Nach dem Laden der Seite sehen Sie eine CSS-Deklaration auf der Seite:

3. Kopieren Sie dieses CSS und fügen Sie es in den <style>-Abschnitt Ihrer E-Mail ein.
Während diese Methode als die sicherste gilt, könnte der Anbieter des Webfont-Dienstes Änderungen an der Direktzugriffs-URL vornehmen, die zum Importieren des Webfonts verwendet wird. Wenn Sie sich für diese Methode entscheiden, sollten Sie Ihre E-Mail regelmäßig testen, um sicherzustellen, dass Ihre Webfonts im Laufe der Zeit weiterhin gerendert werden.

Bei Litmus ist die @font-face-Methode unsere bevorzugte Implementierung für den Import von Webfonts in unsere E-Mails.

Der Verdienst für diese Methode des Imports von Webfonts geht an den Verfechter der Barrierefreiheit von E-Mails, Paul Airy, wie in einem früheren Type: E-Newsletter (den Sie unbedingt abonnieren sollten, falls Sie es noch nicht getan haben).

Verwendung von Web-Fonts in E-Mails

Nach dem Importieren Ihrer Web-Fonts ist die Verwendung in E-Mails so einfach wie die Verwendung einer web-sicheren Schriftart unter Verwendung des in der Import-Methode definierten font-family-Namens:

font-family: 'Montserrat', sans-serif;

Auswahl einer Ersatzschriftart

Bei der Verwendung von Web-Fonts ist es notwendig, eine Ersatzschriftart für E-Mail-Clients zu haben, die Web-Fonts nicht unterstützen.

Standard-Webschriftarten

Jeder E-Mail-Client verfügt über eine Standardschriftart, wenn die im Schriftartenstapel aufgeführte Schriftart nicht verfügbar ist. Gmail verwendet zum Beispiel Arial, Apple Mail verwendet Helvetica und Outlook verwendet Calibri.

Wenn Ihnen eine dieser Standardschriften nicht gefällt, haben wir eine gute Nachricht: Sie können Ihre Ersatzschriftart im Stapel Schriftart/Familie auswählen.

font-family: 'Montserrat', Verdana, sans-serif;

Betrachten Sie dies als eine nach Prioritäten geordnete Liste der bevorzugten Schriftarten. Wenn ein Client die von Ihnen gewählte Schriftart nicht verwenden kann, greift er auf die nächste Schriftart in Ihrer Liste zurück.

Wenn Sie zum Beispiel die obige Schriftartenliste verwenden, ignoriert Google Mail die erste Schriftart in der Liste, da es sich um eine Web-Schriftart handelt, die in Google Mail nicht unterstützt wird. Wenn Verdana auf dem verwendeten Gerät nicht unterstützt wird (was sehr selten vorkommt, da Verdana eine sichere Web-Schriftart ist), würde das Gerät die serifenlose Standardschriftart für sein System verwenden, da dies die dritte Schriftart in der Liste ist.

Wie Sie die richtige Ersatzschriftart wählen

Die Wahl der richtigen Ersatzschriftart, die das Design Ihrer E-Mail beibehält, ist der Schlüssel zu einem großartigen Erlebnis für alle Ihre Abonnenten, unabhängig davon, welchen E-Mail-Client sie verwenden.

Fallback-Schriften sollten denselben Typ wie die Web-Schrift haben – verwenden Sie eine serifenlose Fallback-Schrift, wenn Ihre Web-Schrift eine serifenlose Schrift ist, und eine Serifen-Fallback-Schrift, wenn Ihre Web-Schrift ebenfalls eine Serifen-Schrift ist. Die Verwendung der gleichen Schriftart hilft, das Design Ihrer E-Mail in verschiedenen E-Mail-Clients beizubehalten. Sie können noch einen Schritt weiter gehen, indem Sie die x-Höhe der Schriftarten analysieren.

Die x-Höhe ist die vertikale Höhe der Schriftart. Idealerweise sollten Sie eine Ersatzschriftart wählen, die eine ähnliche x-Höhe hat, um zu verhindern, dass Ihr E-Mail-Design auseinanderfällt, wenn die Ersatzschriftart verwendet wird.

Hier ist ein Beispiel für die feinen Unterschiede in der x-Höhe zwischen den Schriftarten Verdana, Arial und der Webschriftart Proxima Nova. Diese feinen Unterschiede können den Unterschied ausmachen, ob Ihr E-Mail-Design funktioniert oder nicht, wenn Web-Schriften nicht gerendert werden.

CSS Font Stack bietet eine vollständige Liste – einschließlich der Abdeckung von Betriebssystemen – mit sicheren Web-Schriften, die als Ausweichschriften verwendet werden können.

Faux Bold / Faux Italic vermeiden

Wenn Sie fette und kursive Versionen Ihrer Web-Schriftdateien haben, sollten Sie diese auch verwenden! Schriftdesigner haben sich viele Gedanken gemacht und viel Mühe gegeben, um die verschiedenen Stile einer Schrift genau richtig hinzubekommen. Daher ist es am besten, das ursprüngliche Schriftdesign zu verwenden, anstatt dem E-Mail-Client oder Browser zu erlauben, wahllos eine falsche Fett- oder Kursivschrift auf die normale Schrift anzuwenden.

Grundsätzlich sollten Sie dies NICHT tun:

@font-face {font-family: 'Montserrat';src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');}style="font-family: 'Montserrat', Verdana, sans-serif; font-weight: bold; font-style: italic;"

Wie beim Webdesign können Sie die echten Schriftarten einbeziehen, indem Sie diese Stile in Ihren @font-face-Stapel einfügen, etwa so:

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: normal;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: italic;font-weight: normal;src: local('Montserrat-Italic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUQjIg1_i6t8kCHKm459WxRyS7m0dR9pA.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: normal;font-weight: bold;src: local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3gnD_vx3rCs.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: italic;font-weight: bold;src: local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');}

Wie Sie sehen können, beziehen die verschiedenen Stile verschiedene Schriftarten ein, unabhängig von der Schriftfamilie. Wenn Sie also Ihre Schriftart im HTML-Code wie folgt gestalten:

style="font-family: 'Montserrat', Verdana, sans-serif; font-weight: bold; font-style: italic;"

… dann wird die echte Schriftart „Montserrat-BoldItalic“ verwendet! Wenn Sie font-weight: bold; hinzufügen, wird die Schriftart ‚Montserrat-Bold‘ verwendet, und wenn Sie font-style: italic; hinzufügen, wird die Schriftart ‚Montserrat-Italic‘ verwendet.

Sie fragen sich jetzt vielleicht, warum Sie das so machen, anstatt für jeden Stil eine andere Schriftart zu deklarieren, die auch die echten Schriftarten verwendet? So sieht das aus:

Tun Sie das auch NICHT!

@font-face {font-family: 'Montserrat Bold Italic';src: local('Montserrat Bold Italic'), local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');}style="font-family: 'Montserrat Bold Italic', Verdana, sans-serif;"

Das ist ein Problem. Die Verwendung von Schriftfamiliennamen zum Speichern von Stilen führt nicht nur zu übermäßig kompliziertem und redundantem CSS, sondern auch dazu, dass Ihr Text nicht mehr gestylt wird, wenn Ihre Fallbacks zum Einsatz kommen. Wenn Sie beispielsweise den obigen Code in Google Mail anzeigen (das keine benutzerdefinierten Web-Schriftarten unterstützt), sehen Sie statt Montserrat Bold Italic nur eine nicht fettgedruckte, nicht kursivierte Verdana. Indem Sie Ihre Schriftfamilie und Ihre Schriftschnitte getrennt halten, behalten Ihre Ersatzschriftarten immer noch das richtige Styling.

Outlook, was tust du mir an!

Mit Times New Roman als Standard-Fallback-Schriftart ist Outlook seit jeher eine Herausforderung für E-Mail-Marketer mit einem Herz für Typografie. Während Outlook 2019 – die neueste Version von Microsofts Desktop-E-Mail-Client – im Code angegebene Ersatzschriften bevorzugt, sind ältere Outlook-Versionen immer noch eine Herausforderung.

Wenn Sie die @font-face-Importmethode verwenden, wird Outlook 2007/10/13/16 standardmäßig Times New Roman verwenden, unabhängig davon, welche Ersatzschriftart Sie eingestellt haben. Die gute Nachricht ist, dass es einen gut getesteten Hack gibt, der dieses Problem löst.

Das folgende CSS zielt auf Outlook ab, wie durch <!-> und <!-> gekennzeichnet, und weist Outlook an, einen anderen Font-Stack zu verwenden.

<!--><style type="text/css">.fallback-font {font-family: Arial, sans-serif;}</style><!-->

Verwenden Sie die Klasse „fallback-font“ in Ihrer E-Mail, wo immer Sie die Schriftart-family definieren:

<td class="fallback-font" style="font-family: 'Montserrat', Arial, sans-serif;">Your text here</td>

Und Ihre Schriftarten in Outlook 2007/10/13 werden elegant auf Arial zurückgreifen, anstatt auf Times New Roman.

Eine andere Lösung für diesen Fehler besteht darin, den @font-face-Importcode in eine Medienabfrage zu verpacken und ihn so vor Outlook zu verbergen:

@media screen { @font-face {font-family: 'Montserrat';font-style: normal;font-weight: 400;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');}}

Outlook ignoriert nun einfach „Montserrat“ in Ihrem font-family-Stapel und liest die nächste Schriftart.

Es gibt auch die Möglichkeit, die Microsoft Office-spezifische Eigenschaft mso-font-alt mit der von Ihnen gewählten Systemschriftart in Ihren @font-face-Deklarationsblock zu übernehmen.

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: normal;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');mso-font-alt: 'Arial';}

Dadurch wird Outlook für MS Office angewiesen, standardmäßig die zugewiesene Ersatzschriftart zu verwenden.

Wo findet man Web-Schriftarten

Google Fonts

Es gibt viele Web-Schriftartendienste, aber Google Fonts ist unser Favorit. Der Dienst ist völlig kostenlos, und Sie können die Webfonts auf Ihren Computer herunterladen, wenn Sie Designs in Adobe Photoshop, Sketch oder einer anderen Design-Software entwerfen.

Typekit von Adobe

Der beliebte Font-Abonnementdienst von Adobe war in der Vergangenheit für E-Mail-Designer wenig nützlich, da Typekit auf JavaScript zum Einbetten von Schriften angewiesen war. Seit August 2017 ermöglicht Typekit die Verwendung von Web-Schriften nur mit CSS – kein JavaScript erforderlich – und öffnet damit die in Typekit gefundenen Web-Schriften für die Verwendung in E-Mails. Eine ausführliche Anleitung, wie Sie Typekit-Webfonts mit @import in Ihre E-Mails einbinden können, finden Sie in der Typekit-Hilfedokumentation.

Weitere Webfont-Dienste

Wenn Sie noch mehr Websites suchen, die Webfonts zur Verwendung in E-Mails lizenziert anbieten (meist auf kostenpflichtiger Basis), sehen Sie sich einige der folgenden Dienste an:

• MyFonts
• Commercial Type
• Font Spring
• Font Shop
• You Work for Them
• Village
• Process Type Foundry

Lizenzierung von Web-Schriften in E-Mails

Web-Schriften wurden ursprünglich nur für die Verwendung auf Websites entwickelt, Daher sind sie in der Regel nur für die Verwendung auf Websites und in mobilen Anwendungen lizenziert. Der Grund, warum viele Webfont-Dienste die Verwendung in E-Mails nicht zulassen, ist, dass dies als Verbreitung der Schrift angesehen wird, was bei vielen Diensten gegen die Endbenutzer-Lizenzvereinbarung (EULA) verstößt.

Die Webfont-Anbieter in der obigen Liste bieten Lizenzen für die Verwendung von Webfonts in E-Mails an. Viele Lizenzen werden jedoch nach der Anzahl der monatlichen Öffnungen berechnet, was bei der Nutzung eines kostenpflichtigen Webfont-Dienstes berücksichtigt werden sollte.

Kann ich Webfonts verwenden?

Es ist absolut unbedenklich, Webfonts als progressive Erweiterung in Ihren E-Mails zu verwenden. Implementieren Sie Ihre Fallback-Schriften korrekt und bringen Sie Ihre E-Mails in die Zukunft!

Es lohnt sich, einen Blick auf Ihren Abonnentenstamm zu werfen, um zu sehen, wie viele Ihre E-Mails in einem E-Mail-Client betrachten, der Web-Schriften unterstützt. Wenn dies nicht der Fall ist, lohnt sich der Aufwand nicht, vor allem, wenn Sie eine kostenpflichtige Web-Schriftart verwenden möchten.

Web-Schriftarten richtig eingesetzt

Um Ihnen eine kleine Inspiration zu geben, was alles möglich ist, finden Sie hier einige unserer Lieblings-E-Mails mit Web-Schriftarten.

Vergessen Sie nicht das Testen

Da die Verwendung von Webfonts in E-Mails immer noch als etwas experimentell gilt, empfehlen wir Ihnen, häufig zu testen, insbesondere wenn Sie Webfonts in Vorlagen eingesetzt haben, die nicht regelmäßig aktualisiert werden. Änderungen und Aktualisierungen der Rendering-Funktionen von E-Mail-Clients werden in der Regel nicht im Voraus angekündigt und können sporadisch auftreten, daher ist es am besten, regelmäßig zu testen.

Wenn Sie die Web-Schriftart auf Ihrem eigenen Computer installiert haben, können Sie die Web-Schriftart auch sehen, wenn Sie sie in einem E-Mail-Client auf Ihrem Computer testen. Das sollten Sie im Hinterkopf behalten, falls es plötzlich so aussieht, als würde Google Mail jetzt Web-Schriftarten unterstützen.

TESTEN SIE TYPOGRAPHIE IN IHREN KAMPAGNEN

Möchten Sie Ihre Schrift auf die nächste Stufe bringen? Testen Sie Ihre Kampagnen, bevor Sie sie verschicken. Testen Sie Litmus kostenlos und stellen Sie sicher, dass Ihre Typografie in mehr als 90 E-Mail-Clients, einschließlich Desktop-, Webmail- und Mobilgeräten, hervorragend aussieht.

Mehr erfahren →