Funktioniert @ font-face in E-Mail-Vorlagen?

Gibt es eine Möglichkeit, dass ich benutzerdefinierte Webfonts mit CSS @font-face in E-Mail-Vorlagen einbetten kann. Diese Frage bezieht sich speziell auf E-Mail-Vorlagen in MailChimp, aber ich würde auch gerne wissen, ob es eine browserübergreifende Lösung gibt, die auf allen oder den meisten E-Mail-Abonnementdiensten funktioniert.Funktioniert @ font-face in E-Mail-Vorlagen?

Ich habe als es im Stil-Header auf diese Weise das Einbetten:

@font-face { 
    src: url("http://www.remoteserver.com/fonts/font.otf"); 
    font-family: Font; 
}

Aber ich fürchte, das drastisch Seite Last bewirken würde. Gibt es einen besseren Weg?

Update: Um eine universelle Lösung zu finden, sind dies KEINE Google-Fonts oder Schriften, die in irgendeiner Art von Online-Quellbibliothek vorhanden sind.

Quelle

2015-02-03 JLF

Nur in Apple Mail - https://www.campaignmonitor.com/resources/will-it -work/webfonts/ –

@ LuisP.A. Nach dem Durchsehen dieser Seite scheint es wirklich keine Methode zu geben, selbst mit '@ import', die sehr browserübergreifend und clientübergreifend für Webfonts in E-Mails ist? – JLF

können Sie! Aber mit allem, was cool in HTML-E-Mail ist, wird es nicht in jedem Client/Browser funktionieren.

@font-face wird in iOS arbeiten und die (meisten) Androids Standard-Clients, Apple Mail und Outlook 2011 für Mac. Alles andere löscht entweder Ihr gesamtes <style>-Tag oder ignoriert es einfach.

Einige Vorsichtsmaßnahmen: font-face-Freaks out Outlook '07 -'13, also wickeln Sie Ihre Schriftart-Gesicht CSS in einem eigenen Style-Tag, in einem MSO-bedingten. Stellen Sie sicher, dass Sie alle Arten von Schriftdateien in Ihrem @font-face - otf, ttf, eot, svg verwenden, so dass es über Browser hinweg funktioniert. Dann stellen Sie sicher, dass Sie gute Fallbacks haben, wenn Sie es versuchen und verwenden. Zumindest sollten Sie font-family:'Custom Font',sans-serif; (oder Serif) haben.

<!--[if !mso]><!--> 
<style type="text/css"> 
    @font-face { 
    font-family: 'Custom-Font'; 
    font-weight: 400; 
    font-style: normal; 
    src: url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.svg#Customfont-Regular') format('svg'), 
     url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.eot?#iefix') format('embedded-opentype'), 
     url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.woff') format('woff'), 
     url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.ttf') format('truetype'); 
    } 
</style> 
<!--<![endif]-->

Quelle

2015-02-04 20:24:19 zazzyzeph

Ein Gotcha ist Cross-Origin Resource Sharing (CORS). Für mindestens Thunderbird müssen Sie sicherstellen, dass der Remote-Server (die die Schriftart-Hosts) sendet eine HTTP-Header wie:

Access-Control-Allow-Origin: *

Quelle

2016-09-27 12:11:56 holmis83

Funktioniert @ font-face in E-Mail-Vorlagen?

Antwort

Verwandte Themen