Does @ font-face funziona nei modelli di email?

Esiste un modo per incorporare caratteri Web personalizzati utilizzando lo @font-face dei CSS nei modelli di email. Questa domanda è specificamente correlata ai modelli di email in MailChimp, ma vorrei anche sapere se esiste una soluzione cross-browser che funziona su tutti o la maggior parte dei servizi di abbonamento e-mail?Does @ font-face funziona nei modelli di email?

ho considerato incorporarlo nell'intestazione stile in questo modo:

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

Ma temo che questo sarebbe drasticamente effetto di caricamento della pagina. C'è un modo migliore?

Aggiornamento: Per motivi di ricerca di una soluzione universale, questi NON sono caratteri di Google o tipi di carattere che esistono in qualsiasi tipo di libreria di fonti online.

fonte

2015-02-03 JLF

Solo nella posta di Apple - https://www.campaignmonitor.com/resources/will-it -work/webfonts/ –

@ LuisP.A. Dopo aver guardato attraverso quella pagina sembra che non ci sia davvero alcun tipo di metodo, anche con '@ import', che è molto cross-browser e cross-client per i caratteri web nelle e-mail? – JLF

È possibile! Ma con tutte le cose interessanti in html-email non funzionerà in ogni client/browser.

@font-face funzionerà in iOS e (la maggior parte dei) client predefiniti di Android, Apple Mail e Outlook 2011 per Mac. Tutto il resto o spoglia il tuo intero tag <style> o lo ignora semplicemente.

Alcune precauzioni: font-face freaks out Outlook '07 -'13, quindi avvolgi il tuo font-face CSS nel proprio tag di stile, in un condizionale MSO. Assicurati di utilizzare tutti i tipi di file font nel tuo @font-face - otf, ttf, eot, svg in modo che funzioni su tutti i browser. Quindi assicurati di avere buoni fallback quando provi ad usarlo. Almeno dovresti avere font-family:'Custom Font',sans-serif; (o serif).

<!--[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]-->

fonte

2015-02-04 20:24:19 zazzyzeph

Una Gotcha è risorsa Cross-origine condivisione (CORS). Per almeno Thunderbird è necessario assicurarsi che il server remoto (che ospita il carattere) invia un'intestazione HTTP come:

Access-Control-Allow-Origin: *

fonte

2016-09-27 12:11:56 holmis83

Does @ font-face funziona nei modelli di email?

risposta

Problemi correlati