Sul forum di Litmus c’è una soluzione tanto semplice quanto efficace per permettere la visualizzazione corretta dei font alternativi anche su Outlook. Diamo per scontato che i client di posta hanno limitazioni rispetto ai browser nell’interpretare HTML e CSS e che è sempre meglio inserire gli stili inline piuttosto che nel foglio di stile all’interno del tag head.Quindi, se ad esempio decido di utilizzare il font Raleway importandolo dall’esterno, utilizzando il servizio di Google, nello style CSS all’interno del tag head vado ad inserire…
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700
…benissimo, il 99% dei browser non darà problemi. Dentro al mio codice HTML inline span quindi vado a richiamare questo font e inserisco…
<span style="font-family: 'Raleway', Arial, Times, sans-serif;">testo</span>
Il risultato sarà che la parola testo all’interno dello span sarà visualizzata utilizzando il font Raleway. Peccato che se questo codice HTML viene utilizzato per spedire una mail e questa mail viene letta utilizzando Outlook il font Raleway non viene riconosciuto. Ma Outlook nemmeno utilizza il font alternativo Arial come ci si aspetterebbe (il secondo della lista)… ma nemmeno quello successivo. Praticamente Outlook ignora tutto il comando.La soluzione però è molto semplice, si può aggiungere questo codice all’interno dello style CSS…
<style>
[style*="Raleway"] {
font-family: 'Raleway', Arial, Times, sans-serif !important
}
...
</style>
…e inserire questo style all’interno dello span…
<span style="font-family: Arial, Times, sans-serif, 'Raleway'">testo</span>
In questo modo Outlook ignora l’indicazione contenuta nello style CSS e interpreta il comando mettendo come primo font l’Arial, il primo della lista indicato nello stile inline. Nei client che supportano l’utilizzo dei font importati, indicati nel foglio di stile, invece il primo font risulta Raleway perchè nello style CSS viene chiesto di posizionarlo come prima scelta.