Quando crei un sistema di design per email HTML, potresti voler usare un font personalizzato oltre a quelli standard disponibili. Quando lavori con linee guida di brand che richiedono un font specifico, è sempre consigliabile abbinare il font personalizzato a un fallback solido.

Supporto dei client email

La prima cosa da considerare quando lavori con font personalizzati è che il supporto da parte dei client email è parziale. I seguenti client email supportano i font personalizzati:

  • Apple Mail
  • iOS Mail
  • Samsung Mail
  • Outlook.com

È importante definire un font-stack quando usi font personalizzati. Questo dovrebbe includere alcuni font di sistema standard per garantire che la tua email venga visualizzata correttamente anche nei client che non supportano i font personalizzati.

'OpenSansBold', Helvetica, Arial, sans-serif

Per ospitare i tuoi font personalizzati, puoi usare un servizio come Google Fonts oppure ospitarli autonomamente. Possiamo anche ospitarli per i nostri clienti — sarà necessario fornire la prova della licenza prima di procedere.

Per i casi in cui i tuoi font personalizzati non sono supportati, dovresti selezionare dei fallback inclusi nella maggior parte dei computer. Questi fallback definiscono quali font verranno visualizzati se il client email non supporta i font personalizzati.

Configurazione CSS

Il modo più affidabile per includere un font specifico nella tua email è usare @font-face. Di seguito trovi un esempio:

<style> @font-face { font-family: 'Festive', cursive; src: url('https://fonts.googleapis.com/css2?family=Festive&display=swap') }
* { font-family: 'Festive', cursive; }
</style>

Quando lavori con Outlook, devi racchiudere questo @font-face in un tag @media. Questo perché Outlook 2007, 2010 e 2017 non li supportano.