Webfonts: So funktionieren sie perfekt in E-Mails

Veröffentlicht: 2021-04-24

Aus meiner sehr wissenschaftlichen Studie (ich habe meine Tochter beobachtet, als sie im letzten Jahr angefangen hat, Berichte zu schreiben) habe ich gelernt, dass einer der ersten Aspekte des Designs, mit denen die Leute anfangen, mit der Typografie zu spielen. Wenn Sie zum ersten Mal mit dem Schreiben von Berichten beginnen, verbringen Sie Stunden damit, die beste Schriftart herauszufinden. Okay, vielleicht nicht stundenlang, aber die meisten Leute verbringen ein bisschen Zeit damit. Denn wie große Marken wissen, ist Typografie wichtig. Und es ist wichtig in E-Mails.

Aber auch die Zugänglichkeit spielt eine Rolle. Hören Sie also auf, Ihre Nachricht in Bildern einzufangen, und verwenden Sie stattdessen Live-Text mit websicheren Schriftarten und Webschriftarten. Schließlich führt ein Text, der nicht auf Bilder angewiesen ist und von einem breiteren Publikum gelesen werden kann, zu einem großartigen Abonnentenerlebnis. Und da Ihre besten Kunden – E-Mail bringt 36 USD für jeden investierten USD – ist dies großartig für Ihre gesamte Marketingstrategie.

In diesem Blogbeitrag werde ich aufschlüsseln:

Webfonts vs. websichere Fonts
Die Vorteile von Webfonts
E-Mail-Client-Support und -Lizenzierung
Wo finde ich Webfonts
Codieren in E-Mails
Tolle Beispiele für Webfonts in E-Mails

Webfonts vs. websichere Fonts

Es gibt zwei verschiedene Möglichkeiten, Live-Text zu erstellen: websichere Schriftarten und Webschriftarten. Obwohl sie gleich klingen, gibt es deutliche Unterschiede. Um diese Unterschiede zu verstehen, schauen wir uns an, wie Schriftarten in Ihren E-Mails funktionieren.

Beim Codieren Ihrer E-Mail wird die Schriftart mit einer CSS-Eigenschaft namens font-family deklariert. Diese Eigenschaft font-family kann nur einen Schriftnamen oder mehrere Schriftnamen haben – oft auch als Schriftstapel bezeichnet. Das Einschließen mehrerer Schriftartnamen stellt sicher, dass es eine Fallback- oder Backup-Schriftart Ihrer Wahl gibt, wenn eine Schriftart nicht funktioniert. Ohne mehrere Schriftartnamen aufzulisten, kann der E-Mail-Client Ihre Backup-Schriftart festlegen. Wenn Ihre Abonnenten Ihre E-Mail öffnen, liest der Browser die Eigenschaft font-family und zieht die zu verwendende Schriftart ein.

Websichere Schriftarten

Bei websicheren Schriftarten zieht der Browser die Schriftart aus Ihrem lokalen Schriftartenverzeichnis. Das bedeutet, dass es sich um Schriftarten handelt, die bereits auf Ihrem Computer installiert sind. Alle Computer werden mit vorinstallierten Schriftarten geliefert, die als websicher gelten. Sie sind sicher in der Anwendung , weil es eine wirklich gute Chance , Ihre Teilnehmer sie bereits haben, auch.

Der Nachteil ist, dass es im Vergleich zu Webfonts eine begrenzte Anzahl von websicheren Schriftarten gibt. Und sie werden ziemlich häufig verwendet, sodass Sie weniger wahrscheinlich auffallen (wenn Sie das anstreben).

Die offensichtlichen websicheren Schriftarten sind:

Arial
Helvetica
Verdana
Georgia
Times New Roman

Aber es gibt noch einige andere, die Sie mit einem gewissen Maß an Sicherheit verwenden können. Brechen Sie also aus der standardmäßigen Arial- oder Helvetica-Schriftenschleife aus und finden Sie eine websichere Schriftart, die für Ihre Marke geeignet ist.

Die beste Ressource, die ich für websichere Schriftarten gefunden habe, sind CSS-Schriften. Ich finde es toll, dass sie für jede Schriftart einen Prozentsatz der Verwendung für PCs und Macs enthalten, damit Sie ungefähr wissen, wie viele Ihrer Abonnenten die gewünschte Schriftart möglicherweise sehen und wie viele stattdessen Ihre Fallback sehen.

Webfonts

Webfonts werden von einem Server abgerufen – entweder einem Server, den Sie selbst hosten, oder einem externen Server (z. B. Google oder Adobe). Aus diesem Grund ist die Vielfalt der verwendbaren Schriftarten viel größer und sie können auf jedem Computer verwendet werden ... solange der Browser oder E-Mail-Client die Schriftart abrufen kann. In einigen Fällen hat Ihr Abonnent möglicherweise bereits ein Web Schriftart heruntergeladen und auf ihrem Computer installiert, sodass diese Schriftarten auch in E-Mail-Clients funktionieren, die keine Webfonts unterstützen!

Während Webfonts Ihnen also viel mehr Abwechslung und kreative Freiheit bieten, haben sie ihren Preis: begrenzte E-Mail-Client-Unterstützung (auf die ich weiter unten eintauche).

Warum Webfonts?

Sie fragen sich vielleicht, warum sich überhaupt mit Webfonts beschäftigen? Als Marketer und Designer kennen Sie den Druck, in E-Mails mit Farben, Design und – ja – Typografie markenkonform zu bleiben. Mit Webfonts können Sie Ihre Marke präsentieren, ohne sich auf Bilder für Ihren Text verlassen zu müssen.

Das Sperren wichtiger Texte in Bildern ist eine Standardpraxis im E-Mail-Design, um auf der Marke zu bleiben und kreativ zu sein. Aber das „Ausblenden“ von Text in Bildern schränkt die Zugänglichkeit der E-Mail ein, da Screenreader den Text auf dem Bild nicht lesen können.

Ace Hardware E-Mail-Beispiel für Webfonts mit und ohne Bilder — E-Mail mit und ohne Bilder bei Verwendung einer Webschrift

Magic Spoon E-Mail-Beispiel für Webfonts mit und ohne Bilder — E-Mail mit und ohne Bilder bei Verwendung von Text in Bildern

Und Text in Ihren Bildern schadet dem Abonnentenerlebnis, wenn Bilder standardmäßig deaktiviert sind. Dies ist vielleicht kein großer Teil Ihrer Abonnenten, aber es gibt wirklich keine Möglichkeit zu wissen, ob jemand seine Bilder deaktiviert hat und Ihre E-Mail öffnet. Warum also nicht das beste Erlebnis für ein möglichst breites Publikum bieten?

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

Kann ich Webfonts in E-Mails verwenden?

Wenn Sie es noch nicht erraten haben, lautet die Antwort ja! Aber – wie bei allen E-Mails – gibt es Vorbehalte.

E-Mail-Client-Support

Webfonts funktionieren nur in einigen E-Mail-Clients, und es muss darauf geachtet werden, dass die Schriftart dort, wo sie nicht unterstützt werden, elegant zurückfällt.

E-Mail-Client	Unterstützung für Webfonts
Apple-Mail	✓ Ja
Ausblick 2007-2016	✘ Nein
Ausblick 2019	✘ Nein*
Outlook für Mac	✓ Ja
Outlook Office 365	✘ Nein*
Gmail-App	✘ Nein*
iOS	✓ Ja
Outlook-App	✘ Nein
Samsung Mail	✘ Nein*
AOL-Mail	✘ Nein
Google Mail	✘ Nein*
Büro 365	✘ Nein
Outlook.com	✘ Nein
Yahoo! E-Mail	✘ Nein

*Hat je nach E-Mail-Einbettungsmethode einige skurrile Ergebnisse, die später besprochen werden.

Es lohnt sich, einen Blick auf Ihren Abonnentenstamm zu werfen, um zu sehen, wie viele Ihre E-Mails in einem E-Mail-Client anzeigen, der Webfonts unterstützt. Wenn genug Abonnenten vorhanden sind, ist dies eine wunderbare Möglichkeit, Ihrer E-Mail eine zusätzliche Note zu verleihen.

Wenn die Mehrheit dies nicht ist, wäre es Ihre Zeit und Mühe einfach nicht wert, besonders wenn Sie erwägen, eine kostenpflichtige Webschriftart zu verwenden.

Welche E-Mail-Clients verwenden Ihre Abonnenten?

Finden Sie heraus, wo Ihre Abonnenten Ihre E-Mails öffnen und wie sie interagieren – mit Litmus Email Analytics. Erhalten Sie die Erkenntnisse, die Sie benötigen, um Ihre E-Mails und darüber hinaus zu optimieren.

Mehr erfahren →

Lizenzierung

Webfonts wurden ursprünglich ausschließlich für die Verwendung auf Websites entwickelt, daher ist ihre Lizenzierung normalerweise nur für die Verwendung auf Websites und mobilen Anwendungen bestimmt. Der Grund, warum viele Webfont-Dienste die Verwendung in E-Mails nicht zulassen, liegt darin, dass dies als Verbreitung der Schriftart angesehen wird, was gegen viele der Endbenutzer-Lizenzvereinbarungen (EULA) der Dienste verstößt.

Alle von uns kontaktierten Webfont-Anbieter unterstützten die Verwendung ihrer Schriftarten in E-Mails. Jeder Anbieter hatte eine andere Lizenz, die erforderlich war, daher gibt es keine Standardmethode für die Lizenzierung von Schriftarten in E-Mails. Wenn Sie eine Schriftart verwenden möchten, wenden Sie sich an das Unternehmen, um genau zu erfahren, wie es seine Schriftarten lizenziert.

Wo finde ich Webfonts

Sie haben also alles durchdacht und beschlossen, Webfonts auszuprobieren. Mit scheinbar endlosen Optionen können Sie diejenigen finden, die zu Ihrer Marke passen. Aber es ist auch wichtig, die Zugänglichkeit im Auge zu behalten.

Einige Schriftarten sind leichter zu lesen als andere.

Kunstvolle oder dekorative Schriftarten wie Display- oder Handschriftarten können es Menschen mit Sehbehinderungen oder Legasthenie erschweren, den Unterschied zwischen Buchstabenformen zu erkennen. Sans-Serif-Schriften (Schriften ohne erweiterte Funktionen oder Wellen in ihren Buchstaben wie Arial, Calibri, Century Gothic oder Helvetica) und Slab-Schriften (Schriften mit dickeren Linien wie Museo Slab und Rockwell) gelten als zugänglicher.

Hier sind ein paar gute Orte, um mit der Suche zu beginnen.

Google-Schriften

Es gibt viele Webfont-Dienste, aber Google Fonts ist unser Favorit. Der Service ist völlig kostenlos, und Sie können die Webfonts auf Ihren Computer herunterladen, wenn Sie Designs in Adobe Photoshop, Sketch oder einer anderen Designsoftware erstellen.

Adobe-Schriften

Typekit ist seit Oktober 2018 Adobe Fonts. Sie unterstützen jetzt sowohl die <link>- als auch die @import-Methode zur Verwendung von Schriftarten als Webfonts (mehr dazu weiter unten). Der Dienst ist nicht völlig kostenlos, aber wenn Sie bereits ein Creative Cloud-Abonnement haben, ist es darin enthalten.

Webfont-Dienste

Es gibt mehrere andere kostenpflichtige Webfont-Dienste. Sie müssen sicherstellen, dass Sie die richtige Lizenz erhalten, um sie in Ihrer E-Mail zu verwenden.

Typ Netzwerk (Weblizenz)
Prozesstyp Foundry (Weblizenz)
Optimo (Lizenz für digitale Werbung)
Fontspring (benutzerdefinierte E-Mail-Lizenz)
Typothek (Weblizenz)
Produktionstyp (Online-Werbelizenz)
MyFonts (Weblizenz)
Kommerzieller Typ (Weblizenz)

Bei den Weblizenzen besteht die Möglichkeit, die Schriftart selbst zu hosten oder die Schriftart beim Anbieter hosten zu lassen. Bei einigen Weblizenzen zahlen Sie mit jeder E-Mail, die die Schriftart lädt, für eine bestimmte Anzahl von Seitenaufrufen, die als Seitenaufrufe gezählt werden. Berücksichtigen Sie dies also beim Kauf einer Lizenz.

So betten Sie Webfonts in E-Mails ein

Da Webfonts normalerweise nicht auf dem lokalen Gerät von jemandem gefunden werden und stattdessen woanders gehostet werden, müssen Sie Ihre Webfonts zuerst in Ihre E-Mails „einbetten“ oder importieren, bevor Sie sie tatsächlich verwenden können.

1. Rufen Sie die URL Ihrer Schriftartendatei ab

Sie benötigen die URL Ihrer Webschrift, um sie in Ihrer E-Mail aufzurufen. Ihr Webfont-Dienst sollte diese URL haben. Wenn Sie die Schriftartdatei jedoch selbst hosten, rufen Sie die URL ab, von der die Webschriftart auf Ihrem Server gespeichert ist. Stellen Sie sicher, dass es sich um eine öffentliche URL handelt und nicht von einem lokalen Server stammt. Andernfalls können Ihre Abonnenten nicht auf die Webschriftart zugreifen und sehen stattdessen eine Fallback-Schriftart.

Wenn Sie Google Fonts verwenden, ist das Auffinden der URL etwas schwierig, aber nicht allzu schwierig. Wie das geht, erfahren Sie im nächsten Schritt für die Einbettungsmethode @font-face.

2. Importieren Sie die Webschriftart mit einer von drei Methoden

Es gibt drei Methoden zum Einbetten von Webfonts in E-Mails (und eine Einschränkung, die die Methode einschränken kann, die Sie verwenden können). Die drei Methoden zum Einbetten Ihrer Schriftart sind:

<link>
@importieren
@Schriftart

Warum sollten Sie sich also für eine Methode entscheiden?

Die @import-Methode verzögert das Laden der importierten Webschrift, bis der HTML-Code, in den sie eingebettet ist, vollständig geladen ist. Dies kann dazu führen, dass es etwas länger dauert, bis Ihre Webschrift in Ihrer E-Mail angezeigt wird, während der Rest der E-Mail geladen wird. Umgekehrt lädt die Methode <link> die Ressource beim Lesen des Codes der HTML-Datei inline (von oben nach unten), was das Laden Ihrer E-Mail verzögern kann, wenn Ihre Webfont-Datei besonders groß ist.

Eine andere Sache, die Sie bei der Auswahl einer zu verwendenden Methode beachten sollten, ist, was Ihr ESP unterstützt.

Sie können schönen Code erstellen, der den ganzen Tag in Litmus funktioniert, aber wenn Ihr ESP Ihren Code ändert, wie wir wissen, dass die meisten von ihnen dies tun, ist alles, was Sie tun, von Bedeutung. Stellen Sie sicher, dass Ihr ESP Ihren Code nicht so ändert, dass Ihre Schriftarten nicht mehr funktionieren. Bei Litmus lässt unser ESP es nicht zu, dass wir MSO-Bedingungen um Stilelemente herum einschließen. Daher funktionieren die Methoden <link> und @import für uns nicht, da sie in Outlook nicht gut unterstützt werden, worauf wir weiter unten eingehen.

Verwendung von <link>

Die Verwendung der <link>-Methode ist eine relativ einfache Methode zum Einbetten von Schriftarten in Ihre E-Mail. Fügen Sie diese Codezeile in den <head> Ihrer E-Mail oben ein:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

@import verwenden

Die Methode @import ist ebenfalls eine relativ einfache Methode. Platzieren Sie diese Codezeile im <head> Ihrer E-Mail zwischen den <style>-Tags:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

@font-face verwenden

Online-Webfont-Dienste bieten in der Regel fünf Dateiformate zur Auswahl: .eot, .woff, .woff2, .svg und .ttf. Die Formate .woff und .woff2 bieten die beste Unterstützung für E-Mails, daher empfehlen wir, nach Möglichkeit eines oder beide dieser Formate zu verwenden. Die @font-face-Methode ist die einzige Methode, mit der Sie gezielt auswählen können, welches Dateiformat Sie importieren möchten, und ist damit die kugelsicherste Methode zum Implementieren von Webfonts.

Hier ist eine typische @font-face-Deklaration zum Importieren einer Webschrift in eine E-Mail mit Google Fonts als unserem ausgewählten Webfont-Dienst:

@font-face {
  	font-family: 'Roboto';
  	font-style: normal;
  	font-weight: 400;
  	src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
	}

Wenn Sie Google Fonts verwenden, ist es nicht einfach, den @font-face-Code zu finden, aber es ist nicht allzu schwierig.

Zuerst müssen Sie die Schriftart finden, die Sie in Google Font verwenden möchten. Wählen Sie dann den gewünschten Stil aus. Auf der rechten Seite erscheint ein Flyout-Menü.

googe_fonts

Im Flyout gibt es eine Auswahl für <link> oder @import. Beide haben eine URL (im obigen Screenshot hervorgehoben). Sie können diese URL kopieren und in die Adressleiste Ihres Browsers einfügen, um das von Google verwendete CSS-Stylesheet zu finden.

google_font_api

Kopieren Sie die 'lateinische' Version von @font-face und fügen Sie sie zwischen Ihren <style>-Tags ein.

Bei Litmus ist die @font-face-Methode unsere bevorzugte Implementierung zum Importieren von Webfonts in unsere E-Mails.

Alle Ehre für diese Methode zum Importieren von Webfonts geht an Paul Airy, den Befürworter der E-Mail-Barrierefreiheit, wie in einem früheren Newsletter vom Typ E beschrieben.

3. Wählen Sie die richtige Fallback-Schriftart

Bei der Verwendung von Webfonts ist es notwendig, für E-Mail-Clients, die Webfonts nicht unterstützen, eine websichere Fallback-Schriftart einzurichten.

Jeder E-Mail-Client verfügt über eine Standardschriftart, wenn die im Schriftfamilienstapel aufgeführte Schrift nicht verfügbar ist. Gmail verwendet beispielsweise Arial, Apple Mail verwendet Helvetica und Outlook verwendet Times New Roman. Wenn Ihnen der Klang einer dieser Standardschriften nicht gefällt, haben wir eine gute Nachricht: Sie können Ihre Fallback-Schriftart auswählen, wenn Sie im Font-Familien-Stack programmieren (im nächsten Schritt).

Die Wahl der richtigen Fallback-Schriftart, 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-Schriftarten sollten vom gleichen Typ wie die Webschrift sein. Verwenden Sie eine serifenlose Fallback-Schriftart, wenn Ihre Webschrift eine serifenlose Schriftart ist, und eine Serifen-Fallback-Schriftart, wenn Ihre Webschrift ebenfalls eine Serifenschrift ist. Die Verwendung des gleichen Schriftartenstils hilft dabei, 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 Schrift. Idealerweise sollten Sie eine Fallback-Schriftart mit einer ähnlichen x-Höhe wählen, um zu verhindern, dass Ihr E-Mail-Design auseinanderfällt, wenn die Fallback-Schrift verwendet wird.

Beispiel für x-Höhe im Vergleich von Verdana, Arial und Proxima Nova

Hier ist ein Beispiel für die feinen Unterschiede in der x-Höhe zwischen den Schriftarten Verdana, Arial und der Webschrift Proxima Nova. Diese subtilen Unterschiede können den Unterschied bei der Erstellung oder Zerstörung Ihres E-Mail-Designs ausmachen, wenn Webfonts nicht gerendert werden.

4. Verwenden Sie Ihre Schriftarten in E-Mails

Sobald Ihre Webschriftart importiert und Ihre Fallbacks ausgewählt wurden, ist die Verwendung in E-Mails so einfach wie die Verwendung einer websicheren Schriftart. Verwenden Sie einfach den Namen der Schriftartfamilie, der in der Importmethode definiert ist, gefolgt von Ihren Fallback-Schriftarten entweder in der CSS-Inline oder im Head:

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

Betrachten Sie dies als eine priorisierte Liste bevorzugter Schriftarten. Wenn ein E-Mail-Client Ihre erste Wahl nicht erfüllen kann, wird auf den nächsten auf Ihrer Liste zurückgegriffen.

Wenn Sie beispielsweise den obigen Zeichensatzfamilienstapel verwenden, ignoriert Gmail die erste Schriftart in der Liste, da es sich um eine Webschriftart handelt, die in Gmail nicht unterstützt wird. Die gerenderte Schriftart wird also Verdana sein. Wenn Verdana auf dem verwendeten Gerät nicht unterstützt wird (was sehr selten wäre, da Verdana eine websichere Schriftart ist), würde das Gerät die standardmäßige serifenlose Schriftart für sein System verwenden, da dies die dritte Schriftart in der Liste ist.

5. Vermeiden Sie Fett- oder Kursivdruck

Wenn Sie fette und kursive Versionen Ihrer Webfont-Dateien beigefügt haben, verwenden wir sie!

Schriftdesigner haben sich viel Mühe gegeben, all die verschiedenen Stile einer Schriftart genau richtig zu machen die normale Schriftart.

Tun Sie dies grundsätzlich NICHT:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}
style="font-family: 'Roboto', Verdana, sans-serif; font-weight: bold; font-style: italic;"

Wie beim Webdesign können Sie die echten Schriftarten abrufen, indem Sie diese Stile wie folgt in Ihren @font-face-Stack aufnehmen:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto-Italic'), 
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1Mu51xIIzIXKMny.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto-Bold'), 
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto-BoldItalic'),   src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format('woff2');
}

Wie Sie sehen können, ziehen die verschiedenen Stile unabhängig von der Schriftfamilie unterschiedliche Schriftarten ein. So formatieren Sie Ihre Schriftart im HTML-Code wie folgt:

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

… dann wird die echte 'Roboto-BoldItalic'- Schrift eingezogen ! Ebenso fügen Sie einfach font-weight hinzu: bold; zieht 'Roboto-Bold' ein und fügt nur font-style hinzu: kursiv; wird 'Roboto-Italic' einziehen .

Tun Sie dies auch NICHT!

Sie fragen sich vielleicht, warum das so gemacht wird, anstatt für jeden Stil eine andere Schriftfamilie zu deklarieren, die auch die echten Schriften einbezieht? So sieht das aus:

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

Dies stellt ein Problem dar. Die Verwendung von Schriftfamiliennamen zum Speichern von Stilen erzeugt nicht nur übermäßig kompliziertes und überflüssiges CSS, sondern entfernt auch den Stil Ihres Textes, wenn Ihre Fallbacks einsetzen. Wenn Sie also beispielsweise den obigen Code in Gmail anzeigen (was nicht t Unterstützung benutzerdefinierte Web - Fonts), dann werden Sie nur un-bolded sein zu sehen, un-italicized Verdana statt Roboto Bold Italic.

Indem Sie Ihre Schriftfamilie und Ihre Schriftstärken oder Schriftstile getrennt halten, behalten Ihre Fallback-Schriftarten immer noch den richtigen Stil.

6. Verwenden Sie einen Fix für Outlook

Outlook hat eine wunderbare Eigenart, auf die Sie achten sollten. Vor allem, wenn das viele Ihrer Abonnenten nutzen.

Sehen Sie, wie Ihre E-Mails in Outlook aussehen und mehr

Jeder E-Mail-Client hat seine Macken. Glücklicherweise können Sie sie in Ihren E-Mails sehen, bevor Sie auf Senden klicken – mit Litmus Email Previews. Keine kaputten E-Mails mehr.

Erfahren Sie, wie →

Wenn Sie die Methode <link> oder @import verwenden, wird vor Outlook 2019 Times New Roman angezeigt, unabhängig davon, welche Fallbacks Sie für Ihre Schriftart verwendet haben.

Die einfachste Lösung hierfür ist die Verwendung der @font-face-Methode. Wenn Sie jedoch die Methode <link> oder @import verwenden müssen, verwenden Sie Microsoft Office (MSO)-Bedingungen, um diesen Abschnitt Ihrer Stile auszukommentieren. Dadurch wird Outlook davon abgehalten, diese zu sehen, und Ihre Fallback-Schriftarten werden wie vorgesehen verwendet:

Ohne MSO-Bedingungen	Mit MSO-Bedingungen
`<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">`	`<!--[if (gte mso 9)\|(IE)]><!--> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <!--<![endif]-->`

Aber warte eine Minute. Ich habe gerade alles vor Outlook 2019 gesagt. Was passiert also in Outlook 2019 (und Outlook Office 365)? Nun, in diesen E-Mail-Clients greift Outlook auch ohne die MSO-Bedingungen auf Ihren Fallback zurück.

Ohne MSO-Bedingungen	Mit MSO-Bedingungen
`< link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">`	`<!--[if (gte mso 9)\|(IE)]><!--> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <!--<![endif]-->`

Tatsächlich scheint der @import in diesen Clients tatsächlich zu funktionieren! Aber geht das wirklich? Wir haben es mit anderen Schriftarten ausprobiert und die Ergebnisse entsprachen in etwa dem, was Sie von Outlook erwarten würden:

Testen von Webfonts in Outlook

Es sieht so aus, als ob es manchmal eine Systemschriftart anstelle der von Ihnen angegebenen Schriftarten einfügt. Und bei Montserrat bin ich mir nicht ganz sicher, was dort vor sich geht, aber das ist nicht Montserrat. Es sieht tatsächlich eher nach Lato aus. Es scheint also, dass Outlook versucht, Webfonts zu unterstützen, aber es ist noch nicht so weit. Es ist definitiv etwas, auf das Sie in Zukunft achten sollten.

In der Zwischenzeit ist es aus den oben genannten Gründen – und weil Sie nicht nur auf Outlook 2019 abzielen können – am besten @font-face zu verwenden oder Ihre <link>- oder @import-Deklarationen auszublenden.

Wenn Sie feststellen, dass Outlook Ihre Schriftart in Times New Roman konvertiert, können Sie mso-font-alt: 'Arial'; an den @font-face-Block, um einen alternativen Fallback für Outlook bereitzustellen:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  mso-font-alt: 'Arial';
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}

Eine andere Lösung, die Sie verwenden könnten, besteht darin, die Schriftfamilie mit dem websicheren Schriftstapel inline zu codieren und einen <style>-Block einzufügen, um die Schriften mit der Webschrift zu überschreiben. Dann müssen Sie diesen Stilblock nur noch vor Outlook verbergen:

<!--[if (gte mso 9)|(IE)]><!-->
 p, h1, h2, h3, h4 { font-family: 'Roboto', Verdana, Helvetica, sans-serif !important; }
<!--<![endif]-->
style="font-family: Verdana, Helvetica, sans-serif;"

7. Verwenden Sie auch einen Fix für Gmail (nur ein Scherz, es gibt keinen)

Sie fragen sich vielleicht: „Was ist mit Gmail? Wir verwenden Google Fonts , nachdem alle.“

Da Gmail ein Google-Produkt und Google Fonts ein Google-Produkt ist, könnte man meinen, dass sie gut zusammenspielen würden. Aber das ist leider nicht der Fall.

Webfonts funktionieren in Gmail nicht, selbst wenn es sich um Google Fonts handelt und Sie den von Google bereitgestellten Code verwenden. Die einzige Ausnahme hierfür ist Roboto:

Verwendung verschiedener Google Fonts	Verwendung verschiedener Einbettungsmethoden

Und tatsächlich fallen in der Gmail Mail App auf Android alle serifenlosen Schriftarten auf Roboto zurück:

Verwendung verschiedener Google Fonts	Verwenden verschiedener Einbettungsmethoden

Ein paar Inspirationen für den Anfang

Okay, wer ist jetzt bereit, ein paar tolle Beispiele für Marken zu sehen, die Webfonts in E-Mails richtig verwenden?

Ace Hardware verwendete Webfonts, wo sie unterstützt wurden, entschied sich jedoch für Rockwell als Fallback-Slab-Font, um sicherzustellen, dass die E-Mail in anderen E-Mail-Clients weiterhin markenkonform aussieht.

Mit Webfonts	Mit Fallbacks

Webflow verwendet Systemschriftarten als Fallback für ihre Webschriftarten und verwendet Schriftstärken, um ein großartiges typografisches Erlebnis zu gewährleisten, unabhängig davon, welche Schriftart angezeigt wird.

Webflow-E-Mail

Bleiben Sie auf der Marke und fehlerfrei

Webfonts sind eine großartige Möglichkeit, den Text in Ihren E-Mails sowohl markengebunden als auch zugänglich zu halten. Aber wie Sie in diesem Beitrag sehen können, gibt es viele Nuancen zu beachten. Deshalb ist es genauso wichtig,…

Immer testen!

Wir haben unser Bestes getan, um eine Reihe verschiedener Umstände zu testen, aber Ihr ESP kann Ihren Code auf unerwartete Weise verzerren. Stellen Sie sicher, dass Sie Ihre E-Mails testen, bevor Sie sie versenden, um sicherzustellen, dass alle Ihre Fallbacks ordnungsgemäß funktionieren.

QA-Test-Webfonts in Ihren E-Mails

Hast du es richtig gemacht? Finden Sie es mit einer kostenlosen Testversion von Lackmus heraus. Sehen Sie sich eine Vorschau an, wie Ihre E-Mails in über 90 E-Mail-Clients, Apps und Geräten aussehen. Und pflegen Sie Ihren Markenruf mit fehlerfreien E-Mails.

Starten Sie Ihre kostenlose Testversion von Lackmus →

Das Hinzufügen von Webfonts ist eine großartige progressive Verbesserung, die Ihnen hilft, Ihren Abonnenten in ihren Posteingängen das beste Erlebnis zu bieten. Spaß haben! Und lassen Sie es uns wissen, wenn Sie unten Fragen oder Kommentare haben.

Ursprünglich veröffentlicht am 11. April 2019 von Jaina Mistry. Zuletzt aktualisiert am 23. April 2021.