Und Sie verwenden sie so ziemlich genauso, wie Sie benutzerdefinierte Schriftarten auf einer Website verwenden würden. Jaina Mistry hatte letztes Jahr die Nachricht dazu im Litmus-Blog
Während Webfonts keine universelle Unterstützung haben, hier sind die E-Mail-Clients, in denen sie unterstützt werden
- AOL Mail
- Native Android Mail-App (nicht Gmail-App)
- Apple Mail
- iOS Mail
- Outlook 2000
- Outlook.com App
Abgesehen von der Verwendung eines JavaScript-Font-Loaders, der definitiv nicht in E-Mails funktioniert (kein E-Mail-Client wird JavaScript ausführen), läuft es letztendlich auf @font-face in CSS hinaus. Machen wir das also.
Nehmen wir an, wir wollten Lato in einer E-Mail verwenden, wenn wir das können. Machen Sie das normale Google Fonts-Ding und finden Sie die URL zum Laden von Lato. Wenn Sie diese URL einfach besuchen, sehen Sie, dass sie Lato über @font-face lädt, und Sie können diesen Code problemlos schnappen
In Ihrer HTML-Vorlage würden Sie dies in einen <style>-Block im <head> einfügen und auch die font-family festlegen
<style type="text/css">
@media screen {
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
...
body {
font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
}
</style>Beachten Sie, dass dort einige Fallback-Schriftarten eingestellt sind. Es ist genauso gut, auf Lato-ähnliche Schriftarten zurückzufallen, wenn wir das können.
Hier sehen wir, wie das im Litmus Builder funktioniert
Aber nur um sicherzugehen, wir müssen es an einige tatsächliche E-Mail-Clients senden und sehen, was passiert
Ich denke, die Art, darüber nachzudenken, ist: Einige tun es, einige nicht, meh, irgendwie eine coole progressive Verbesserung, um Ihre Marke abzugleichen.
Das ist etwas, worüber ich nachgedacht habe: E-Mail-Design. Die Designs, die wir im Web erzielen können, gehen in die E-Mail über. Das würde mich dann zu dem Glauben führen, dass all diese Vorteile mit den gleichen bekannten Herausforderungen einhergehen könnten. Wie berücksichtigen Sie #ux bei E-Mails? Was ist mit **Latenz**? Kommen **FOIT** oder **FOUT** ins Spiel? Was sind die Fallback-Regeln bei E-Mail-Engines? #aufderSuche
Ich glaube, da ist ein Fehler. Wie oben geschrieben, sollte es bei Gmail unter Android nicht funktionieren. Tatsächlich scheint der Screenshot Lato nicht darzustellen. Achten Sie auf die Krümmung des "r" oder die Form des "y".
Das ist die Standard-Android-Systemschriftart.
Vergessen Sie nicht: Einige ältere Outlook-Clients erfordern, dass Sie im @font-face-Block selbst eine alternative Schriftart angeben
@font-face {...
mso-font-alt: Arial;
}
Andernfalls sehen Sie die gute alte Times New Roman als Fallback-Schriftart.
Es gibt auch die Möglichkeit, benutzerdefinierte Schriftarten mit einem modernen **Systemschriftart-Stack** zu sichern (oder sich ausschließlich darauf zu verlassen)
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;Eine potenzielle "Fallstrick" , auf die man achten sollte, ist, dass einige E-Mail-Dienstanbieter das Laden einer @font-face-Schriftart fälschlicherweise als Klick oder Öffnung zählen.
Am besten testen Sie, bevor Sie @font-face in Ihren Produktions-E-Mails verwenden.
Warum keine Erwähnung von @import? Ich benutze das für Kampagnen und es funktioniert großartig.
Eine große Fallstrick, auf die man achten muss, wenn man diese E-Mails erstellt: Wenn Sie nicht der Designer der E-Mail sind und der Designer die E-Mail sieht, sobald sie gesendet wurde, informieren Sie ihn darüber, dass eine Fallback-Schriftart verwendet wird, wenn der E-Mail-Client keine benutzerdefinierten Schriftarten unterstützt. Sie sollten es auch ernsthaft vermeiden, etwas Ausgefallenes mit Typografie zu machen, versuchen Sie nicht, Text auf eine coole Weise zu überlappen, denn sobald diese Fallback-Schriftart greift, wird Ihr schönes typografisches Kunstwerk wie Müll aussehen. Wahrgenommene Zeilenhöhen können sich ändern, der Zeichenabstand kann sich ändern, fast alles an der Schriftart kann ein wenig daneben liegen, wenn sie zurückfällt. Keep It Simple Stupid.
Glücklicherweise können Sie einige dieser Probleme möglicherweise mit @supports in Ihrem CSS umgehen. Viele E-Mail-Clients unterstützen @supports noch nicht, aber wenn Sie mit @supports vertraut sind, wissen Sie, dass mangelnde Unterstützung für @supports nur bedeutet, dass Sie ein Fallback vor @supports angeben.
Danke für die Erwähnung, Chris! Obwohl ich glaube, dass der Screenshot für Gmail auf Android ein negatives Ergebnis zeigt – die Webfont-Schrift Lato wird nicht angezeigt. Ich warte immer noch darauf, dass Gmail Webfonts in seinen Apps aktiviert.
Eine Sache, die man beachten sollte, ist, dass Outlook ab 2007 auf Times New Roman zurückfällt, da es den Schriftstapel nicht richtig liest. Die beste Vorgehensweise ist, der body-Tag, der Webfonts hat, ein !important-Tag hinzuzufügen und die Schriftarten für jedes Element inline zu deklarieren. Oder mit dem !important-Tag im body können Sie eine Outlook-bedingte Anweisung für die Schriftarten im body verwenden.