Font web: come farli funzionare perfettamente nelle e-mail

Pubblicato: 2021-04-24

Dal mio studio molto scientifico (ho osservato mia figlia mentre ha iniziato a scrivere relazioni nell'ultimo anno), ho imparato che uno dei primi aspetti del design con cui le persone iniziano a giocare è la tipografia. Quando inizi a scrivere rapporti per la prima volta, trascorri ore a cercare di capire il miglior font da usare. Ok, forse non ore, ma la maggior parte delle persone ci dedica un po' di tempo. Perché, come sanno i grandi marchi, la tipografia conta. E nelle e-mail è importante.

Ma anche l'accessibilità è importante. Quindi smetti di intrappolare il tuo messaggio in immagini e inizia a utilizzare il testo in tempo reale con caratteri Web e caratteri Web sicuri. Dopotutto, il testo che non dipende dalle immagini e che può essere letto da un pubblico più ampio porta a un'ottima esperienza per gli abbonati. E poiché i tuoi migliori clienti, l'e-mail restituisce $ 36 per ogni $ 1 investito, è ottimo per la tua strategia di marketing complessiva.

In questo post del blog, analizzerò:

Caratteri Web vs. caratteri sicuri per il Web
I vantaggi dei caratteri web
Supporto e licenza per client di posta elettronica
Dove trovare i caratteri web
Codificarli in e-mail
Grandi esempi di caratteri web nelle e-mail

Caratteri Web vs. caratteri sicuri per il Web

Esistono due modi diversi per eseguire il testo in tempo reale: caratteri sicuri per il Web e caratteri Web. Sebbene suonino allo stesso modo, ci sono differenze definite. Per comprendere queste differenze, diamo un'occhiata a come funzionano i caratteri nelle tue e-mail.

Quando la tua email è codificata, il font viene dichiarato utilizzando una proprietà CSS chiamata font-family. Questa proprietà della famiglia di font può avere un solo nome di font o più nomi di font, spesso indicati come stack di font. L'inclusione di più nomi di font garantisce che se un font non funziona, c'è un font di riserva o di backup di tua scelta. Senza elencare più nomi di caratteri, il client di posta elettronica decide il carattere di backup. Quando i tuoi iscritti aprono la tua email, il browser legge la proprietà della famiglia di caratteri e inserisce il carattere da utilizzare.

Font sicuri per il Web

Con i caratteri sicuri per il Web, il browser estrae il carattere dalla directory dei caratteri locale. Ciò significa che si tratta di caratteri già installati sul tuo computer. Tutti i computer sono dotati di caratteri preinstallati e questi sono considerati sicuri per il Web. Sono sicuri da usare perché ci sono davvero buone probabilità che anche il tuo abbonato li abbia già.

Lo svantaggio è che esiste un numero limitato di caratteri sicuri per il Web rispetto ai caratteri per il Web. E sono usati abbastanza frequentemente, quindi è meno probabile che tu ti distingua (se è quello a cui stai mirando).

I caratteri sicuri per il Web ovvi sono:

Arial
Helvetica
Verdana
Georgia
Times New Roman

Ma ce ne sono molti altri là fuori che puoi usare con un certo grado di sicurezza. Quindi esci dal ciclo di caratteri Arial o Helvetica standard e trova un carattere sicuro per il web che funzioni per il tuo marchio.

La migliore risorsa che ho trovato per i font sicuri per il web è CSS Fonts. Adoro il fatto che includano una percentuale di utilizzo per PC e Mac per ciascun carattere, in modo da sapere approssimativamente quanti dei tuoi abbonati potrebbero vedere il carattere che desideri e quanti invece vedranno il tuo fallback.

Caratteri web

I caratteri Web vengono estratti da un server, uno che ospiti tu stesso o uno esterno (come Google o Adobe). Per questo motivo, la varietà di caratteri che possono essere utilizzati è molto più ampia e possono essere utilizzati su qualsiasi computer... purché il browser o il client di posta elettronica possano inserire il carattere. In alcuni casi, il tuo abbonato potrebbe già avere un sito web font scaricato e installato sulla loro macchina, quindi questi font funzioneranno anche nei client di posta elettronica che non supportano i font web!

Quindi, mentre i caratteri web ti danno molta più varietà e libertà creativa, hanno un costo: supporto client di posta elettronica limitato (che approfondirò più in basso).

Perché i caratteri web?

Quindi potresti chiederti, perché preoccuparsi dei caratteri web? In qualità di marketer e designer, conosci la pressione di rimanere sul marchio nelle e-mail con colori, design e, sì, tipografia. I caratteri Web ti consentono di mostrare il tuo marchio senza fare affidamento sulle immagini per il tuo testo.

Bloccare una copia importante nelle immagini è stata una pratica standard nel design delle e-mail come un modo per rimanere sul marchio ed essere creativi. Ma "nascondere" il testo nelle immagini limita l'accessibilità dell'e-mail perché gli screen reader non possono leggere il testo sull'immagine.

Esempio di email di Ace Hardware di caratteri web con e senza immagini — E-mail con e senza immagini quando si utilizza un font web

Esempio di e-mail di Magic Spoon di caratteri web con e senza immagini — E-mail con e senza immagini quando si utilizza il testo nelle immagini

Inoltre, avere del testo nelle immagini danneggia l'esperienza dell'abbonato se le immagini sono disattivate per impostazione predefinita. Questa potrebbe non essere una parte importante dei tuoi iscritti, ma non c'è davvero modo di sapere se qualcuno ha le immagini disattivate e apre la tua email. Allora perché non fornire la migliore esperienza per il pubblico più vasto possibile?

I caratteri Web aprono nuove strade alla creatività nella tipografia, consentendo ai designer di posta elettronica di essere creativi e accessibili e di attenersi all'aspetto del loro marchio.

Posso utilizzare i caratteri web nelle e-mail?

Se non hai ancora indovinato, la risposta è sì! Ma, come in tutte le cose e-mail, ci sono avvertimenti.

Assistenza client di posta elettronica

I caratteri Web funzionano solo in alcuni client di posta elettronica e occorre prestare attenzione per garantire che dove non sono supportati, il carattere ricada con grazia.

Client di posta elettronica	Supporto per i caratteri Web
Posta Apple	✓ Sì
Outlook 2007-2016	No
Prospettive 2019	No*
Outlook per Mac	✓ Sì
Outlook Office 365	No*
Applicazione Gmail	No*
iOS	✓ Sì
Applicazione Outlook	No
Posta Samsung	No*
Posta AOL	No
Gmail	No*
Ufficio 365	No
Outlook.com	No
Yahoo! posta	No

* Ha alcuni risultati traballanti a seconda del metodo di incorporamento dell'e-mail, discusso in seguito.

Vale la pena dare un'occhiata alla tua base di iscritti per vedere quanti stanno visualizzando le tue email in un client di posta che supporta i caratteri web. Se un numero sufficiente di iscritti lo è, è un modo meraviglioso per dare un tocco in più alla tua email.

Se la maggior parte non lo è, semplicemente non varrebbe la pena del tuo tempo e dei tuoi sforzi, soprattutto se stai pensando di utilizzare un font web a pagamento.

Quali client di posta usano i tuoi iscritti?

Scopri dove i tuoi iscritti aprono le tue e-mail e come interagiscono con Litmus Email Analytics. Ottieni le informazioni di cui hai bisogno per ottimizzare le tue e-mail e non solo.

Scopri di più →

Licenza

I caratteri Web sono stati originariamente progettati per essere utilizzati esclusivamente su siti Web, quindi la loro licenza è in genere per l'uso solo su siti Web e applicazioni mobili. Il motivo per cui molti servizi di font web non ne consentono l'uso nelle e-mail è perché è visto come distribuire il font, il che va contro molti dei contratti di licenza con l'utente finale (EULA) dei servizi.

Tutti i fornitori di caratteri Web che abbiamo contattato hanno supportato l'utilizzo dei loro caratteri nelle e-mail. Ogni provider aveva una licenza diversa che era richiesta, quindi non esiste un modo standard in cui i caratteri vengono concessi in licenza nelle e-mail. Se stai cercando di utilizzare un font, contatta l'azienda per scoprire esattamente come autorizzano i loro font.

Dove trovare i caratteri web

Quindi hai pensato a tutto e hai deciso che vuoi provare i caratteri web. Con opzioni apparentemente infinite, puoi trovare quelle adatte al tuo marchio. Ma è anche importante tenere a mente l'accessibilità.

Alcuni caratteri sono più facili da leggere di altri.

I caratteri ornati o decorativi, come i caratteri di visualizzazione o di scrittura a mano, possono rendere difficile per le persone con disabilità visive o dislessia distinguere la differenza tra le forme delle lettere. I font sans-serif (caratteri senza caratteristiche estese o riccioli nelle loro lettere come Arial, Calibri, Century Gothic o Helvetica) e i font slab (caratteri con linee più spesse come Museo Slab e Rockwell) sono considerati più accessibili.

Ecco alcuni buoni posti per iniziare a cercare.

Google Fonts

Sono disponibili molti servizi di font web, ma Google Fonts è il nostro preferito. Il servizio è totalmente gratuito e puoi scaricare i caratteri Web sul tuo computer se stai simulando progetti in Adobe Photoshop, Sketch o un altro software di progettazione.

Font Adobe

Typekit è diventato Adobe Fonts a partire da ottobre 2018. Ora supportano sia il metodo <link> che @import per l'utilizzo dei caratteri come caratteri Web (più avanti). Il servizio non è completamente gratuito, ma se hai già un abbonamento a Creative Cloud, è incluso.

Servizi di font web

Ci sono molti altri servizi di font web disponibili a pagamento. Dovrai assicurarti di ottenere la licenza corretta per usarli nella tua email.

Tipo Rete (Licenza Web)
Tipo di processo Foundry (licenza Web)
Optimo (licenza per annunci digitali)
Fontspring (licenza e-mail personalizzata)
Tipoteca (Licenza Web)
Tipo di produzione (licenza pubblicitaria online)
MyFonts (licenza web)
Tipo commerciale (licenza web)

Con le licenze Web, potrebbe essere possibile scegliere di ospitare il font da soli o di avere il font ospitato dal provider. In alcune licenze Web, paghi per una certa quantità di visualizzazioni di pagina con ogni e-mail che carica il font contando come visualizzazione di pagina, quindi assicurati di tenerne conto quando acquisti una licenza.

Come incorporare i caratteri web nelle e-mail

Poiché i caratteri web in genere non si trovano sul dispositivo locale di qualcuno e invece sono ospitati altrove, devi "incorporare" o importare il tuo carattere web nelle tue e-mail prima di poterli effettivamente utilizzare.

1. Ottieni l'URL del tuo file di font

Avrai bisogno dell'URL del tuo carattere web per richiamarlo nella tua email. Il tuo servizio di font web dovrebbe avere questo URL. Ma se stai ospitando tu stesso il file del font, ottieni l'URL da dove si trova il font web sul tuo server. Assicurati che sia un URL pubblico e non provenga da un server locale. In caso contrario, i tuoi iscritti non saranno in grado di accedere al carattere web e vedranno invece un carattere di riserva.

Se stai utilizzando Google Fonts, trovare l'URL è un po' complicato, ma non troppo difficile. Scopri come nel passaggio successivo per il metodo di incorporamento @font-face.

2. Importa il carattere web utilizzando uno dei tre metodi

Esistono tre metodi per incorporare i caratteri Web nelle e-mail (e un avvertimento che potrebbe limitare il metodo che è possibile utilizzare). I tre metodi per incorporare il tuo font sono:

<link>
@importare
@font-face

Allora perché dovresti scegliere un metodo piuttosto che un altro?

Il metodo @import rinvia il caricamento del carattere web che viene importato fino a quando l'HTML in cui è incorporato non è completamente caricato. Ciò può far sì che il tuo carattere web impieghi un po' più di tempo ad apparire nella tua email, mentre il resto dell'email viene caricato. Al contrario, il metodo <link> carica la risorsa in linea mentre viene letto il codice del file HTML (dall'alto verso il basso), il che potrebbe ritardare il caricamento della tua email se il tuo file di font web è particolarmente grande.

Un'altra cosa da tenere a mente quando si sceglie un metodo da utilizzare è ciò che supporta il proprio ESP.

Puoi creare un codice bellissimo che funziona in Litmus tutto il giorno, ma se il tuo ESP cambia il tuo codice, come sappiamo che la maggior parte di loro fa, allora nulla di ciò che fai avrà importanza. Assicurati che il tuo ESP non cambi il tuo codice in un modo che farebbe smettere di funzionare i tuoi caratteri. In Litmus, il nostro ESP non ci consente di includere i condizionali MSO intorno agli elementi di stile. Quindi i metodi <link> e @import non funzioneranno per noi in quanto non sono ben supportati in Outlook, di cui parleremo più avanti.

Usando <link>

L'utilizzo del metodo <link> è un metodo relativamente semplice per incorporare i caratteri nella tua email. Inserisci questa riga di codice nell'<head> della tua email, vicino alla parte superiore:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Usando @import

Anche il metodo @import è un metodo relativamente semplice. Inserisci questa riga di codice nella <head> della tua email tra i tag <style>:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

Usando @font-face

I servizi di font web online offrono comunemente cinque formati di file tra cui scegliere: .eot, .woff, .woff2, .svg e .ttf. I formati .woff e .woff2 hanno il miglior supporto quando si tratta di e-mail, quindi ti suggeriamo di utilizzare uno o entrambi questi formati quando puoi. Il metodo @font-face è l'unico metodo che ti consente di scegliere in modo specifico quale formato di file desideri importare, rendendolo il metodo più a prova di proiettile per l'implementazione dei caratteri web.

Ecco una tipica dichiarazione @font-face per l'importazione di un font web nell'e-mail utilizzando Google Fonts come servizio di font web scelto:

@font-face {
  	font-family: 'Roboto';
  	font-style: normal;
  	font-weight: 400;
  	src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
	}

Se stai utilizzando Google Fonts, trovare il codice @font-face non è il più semplice, ma non è troppo difficile.

Innanzitutto, devi trovare il carattere che desideri utilizzare su Google Font. Quindi, scegli lo stile che desideri utilizzare. Apparirà un menu a comparsa sulla destra.

font_googe

Nel riquadro a comparsa, sarà possibile scegliere <link> o @import. Entrambi avranno un URL (evidenziato nello screenshot qui sopra). Puoi copiare quell'URL e incollarlo nella barra degli indirizzi del tuo browser per trovare il foglio di stile CSS utilizzato da Google.

google_font_api

Copia e incolla la versione "latina" di @font-face tra i tuoi tag <style>.

In Litmus, il metodo @font-face è la nostra implementazione di riferimento per l'importazione di caratteri Web nelle nostre e-mail.

Tutto il merito di questo metodo di importazione dei caratteri Web va al sostenitore dell'accessibilità delle e-mail Paul Airy, come dettagliato in una precedente newsletter di tipo: E.

3. Scegli il carattere di fallback giusto

Quando si utilizzano i caratteri Web, è necessario disporre di un carattere sicuro per il Web di riserva per quei client di posta elettronica che non supportano i caratteri Web.

Ogni client di posta ha un carattere predefinito se il carattere elencato nello stack della famiglia di caratteri non è disponibile. Ad esempio, Gmail utilizza Arial, Apple Mail utilizza Helvetica e Outlook utilizza Times New Roman. Se non ti piace il suono di nessuno di questi caratteri predefiniti, abbiamo alcune buone notizie: puoi scegliere il tuo carattere di riserva quando esegui il codice nello stack della famiglia di caratteri (nel passaggio successivo).

La scelta del giusto carattere di riserva che mantenga il design della tua email è la chiave per offrire un'esperienza eccezionale a tutti i tuoi abbonati, indipendentemente dal client di posta elettronica che stanno utilizzando.

I font di fallback dovrebbero essere dello stesso tipo del font web: usa un font di fallback sans-serif se il tuo font web è un font sans-serif e un font di fallback serif se anche il tuo font web è un font serif. L'utilizzo dello stesso stile di carattere ti aiuterà a mantenere il design della tua email in diversi client di posta.

Puoi fare un ulteriore passo avanti analizzando l'altezza x dei caratteri.

L'altezza x è l'altezza verticale del carattere. Idealmente, dovresti scegliere un font di fallback che abbia un'altezza x simile per evitare che il design della tua email si sfaldi quando il font di fallback è in uso.

esempio di x-altezza che confronta verdana, arial e proxima nova

Ecco un esempio delle sottili differenze nell'altezza x tra i caratteri Verdana, Arial e il carattere web Proxima Nova. Queste sottili differenze possono fare la differenza nel creare o distruggere il design della tua email quando i caratteri web non vengono visualizzati.

4. Usa i tuoi caratteri nelle e-mail

Una volta che il tuo carattere web è stato importato e sono stati scelti i tuoi fallback, usarli nelle email è facile come usare un carattere sicuro per il web. Usa semplicemente il nome della famiglia di caratteri definito nel metodo di importazione seguito dai tuoi caratteri di fallback nel CSS inline o nell'intestazione:

font-family: 'Roboto', Verdana, sans-serif;

Pensa a questo come un elenco prioritario di caratteri preferiti. Se un client di posta elettronica non è in grado di soddisfare la tua scelta numero uno, tornerà a quello successivo nella tua lista.

Ad esempio, utilizzando lo stack della famiglia di caratteri sopra, Gmail ignorerà il primo carattere nell'elenco poiché è un carattere web non supportato in Gmail. Quindi il carattere reso sarà Verdana. Se Verdana non è supportato sul dispositivo utilizzato (cosa molto rara poiché Verdana è un carattere sicuro per il Web), il dispositivo utilizzerà il carattere sans-serif predefinito per il suo sistema, poiché questo è il terzo carattere nell'elenco.

5. Evita il finto grassetto o il finto corsivo

Se disponi di versioni in grassetto e corsivo di accompagnamento dei tuoi file di font web, usiamoli!

I designer di caratteri tipografici hanno riflettuto e si sono impegnati molto per ottenere tutti i diversi stili di un carattere nel modo giusto , quindi è buona norma applicare il design del tipo originale piuttosto che consentire al client di posta o al browser di applicare a casaccio un finto grassetto o falso corsivo a il carattere normale.

Fondamentalmente, NON fare questo:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}
style="font-family: 'Roboto', Verdana, sans-serif; font-weight: bold; font-style: italic;"

Come per il web design, puoi inserire i caratteri originali includendo questi stili nel tuo stack @font-face, in questo modo:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto-Italic'), 
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1Mu51xIIzIXKMny.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto-Bold'), 
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto-BoldItalic'),   src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format('woff2');
}

Come puoi vedere, i diversi stili richiamano caratteri diversi indipendentemente dalla famiglia di caratteri. In questo modo, se stili il tuo carattere nell'HTML in questo modo:

style="font-family: 'Roboto', Verdana, sans-serif; font-weight: bold; font-style: italic;"

…allora inserirà il vero carattere 'Roboto-BoldItalic' ! Allo stesso modo, aggiungendo semplicemente font-weight: bold; inserirà 'Roboto-Bold' e aggiungerà solo lo stile del carattere: corsivo; tirerà in 'Roboto-Italic' .

NON fare nemmeno questo!

Quindi, potresti chiederti: perché farlo in questo modo invece di dichiarare una famiglia di caratteri diversa per ogni stile, che include anche i caratteri originali? Ecco come appare:

@font-face {
font-family: 'Roboto Bold Italic';
src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format('woff2');
}
style="font-family: 'Roboto Bold Italic', Verdana, sans-serif;"

Questo presenta un problema. L'utilizzo di nomi di famiglie di caratteri per memorizzare gli stili non solo crea CSS eccessivamente complicati e ridondanti, ma rimuove anche il testo dallo stile se si attivano i fallback. Ad esempio, se stai visualizzando il codice sopra in Gmail (che non t supporta caratteri Web personalizzati), vedrai solo Verdana senza grassetto e senza corsivo invece di Roboto Bold Italic .

Mantenendo la tua famiglia di caratteri e i pesi dei caratteri o gli stili dei caratteri separati, i tuoi caratteri di riserva manterranno comunque lo stile corretto.

6. Usa una correzione per Outlook

Outlook ha una stranezza meravigliosa a cui vorrai prestare attenzione. Soprattutto se è quello che usano molti dei tuoi abbonati.

Guarda come appaiono le tue email in Outlook e altro

Ogni client di posta ha le sue peculiarità. Fortunatamente, puoi vederli nelle tue e-mail prima di premere l'invio, con Litmus Email Previews. Niente più email rotte.

Scopri come →

Se utilizzi il metodo <link> o @import, tutto ciò che precede Outlook 2019 visualizzerà Times New Roman indipendentemente da quali fallback hai inserito per il tuo font.

La soluzione più semplice per questo è usare il metodo @font-face. Ma se hai bisogno di usare il metodo <link> o @import, usa i condizionali di Microsoft Office (MSO) per commentare quella sezione dei tuoi stili. Ciò impedirà a Outlook di vederli e utilizzerà i caratteri di fallback come previsto:

Senza condizionali MSO	Con i condizionali MSO
`<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">`	`<!--[if (gte mso 9)\|(IE)]><!--> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <!--<![endif]-->`

Ma aspetta un minuto. Ho appena detto tutto prima di Outlook 2019. Quindi cosa succede in Outlook 2019 (e Outlook Office 365)? Bene, in quei client di posta elettronica, Outlook ricorre al tuo fallback anche senza i condizionali MSO.

Senza condizionali MSO	Con i condizionali MSO
`< link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">`	`<!--[if (gte mso 9)\|(IE)]><!--> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <!--<![endif]-->`

In effetti, in quei client, @import sembra funzionare davvero! Ma lo fa davvero? L'abbiamo provato con altri caratteri e i risultati sono stati quasi alla pari con quello che ti aspetteresti da Outlook:

testare i caratteri web in Outlook

Sembra che a volte inserisca un carattere di sistema invece dei caratteri specificati. E nel caso di Montserrat, non sono sicuro di cosa stia succedendo lì, ma non è Montserrat. In realtà assomiglia più a Lato. Quindi sembra che Outlook stia tentando di supportare i caratteri Web, ma non è ancora arrivato. È sicuramente qualcosa da tenere d'occhio in futuro.

Nel frattempo, per i motivi di cui sopra, e poiché non puoi scegliere come target solo Outlook 2019, è meglio usare @font-face o nascondere le tue dichiarazioni <link> o @import.

Se trovi Outlook che converte il tuo font in Times New Roman, puoi aggiungere mso-font-alt: 'Arial'; al blocco @font-face per fornire un fallback alternativo per Outlook:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  mso-font-alt: 'Arial';
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}

Un'altra soluzione che potresti usare è codificare la famiglia di caratteri con lo stack di caratteri sicuro per il web in linea e includere un blocco <style> per sovrascrivere i caratteri con il carattere web. Quindi si tratta solo di nascondere quel blocco di stile da Outlook:

<!--[if (gte mso 9)|(IE)]><!-->
 p, h1, h2, h3, h4 { font-family: 'Roboto', Verdana, Helvetica, sans-serif !important; }
<!--<![endif]-->
style="font-family: Verdana, Helvetica, sans-serif;"

7. Usa una correzione anche per Gmail (sto scherzando, non ce n'è una)

Quindi ti starai chiedendo: "E Gmail? Dopotutto stiamo usando Google Fonts."

Penseresti che, poiché Gmail è un prodotto Google e Google Fonts è un prodotto Google, funzionerebbero bene insieme. Ma ahimè, non è così.

I caratteri Web non funzionano in Gmail anche se sono un Google Font e anche se utilizzi il codice fornito da Google. L'unica eccezione è Roboto:

Utilizzo di diversi Google Fonts	Utilizzo di diversi metodi di inclusione

E infatti, sull'app Gmail Mail su Android, tutti i caratteri sans-serif ricadono su Roboto:

Utilizzo di diversi Google Fonts	Utilizzo di diversi metodi di incorporamento

Qualche ispirazione per iniziare

Bene, ora chi è pronto a vedere un paio di fantastici esempi di marchi che utilizzano i caratteri web nelle e-mail nel modo giusto?

Ace Hardware ha utilizzato i caratteri web dove sono supportati, ma ha scelto Rockwell come carattere lastra di fallback per garantire che l'e-mail continuasse ad apparire sul marchio in altri client di posta elettronica.

Con i caratteri web	Con fallback

Webflow utilizza i caratteri di sistema come fallback per i propri caratteri web e utilizza i pesi dei caratteri per garantire un'ottima esperienza tipografica, indipendentemente dal carattere visualizzato.

e-mail flusso web

Rimani in linea con il marchio e senza errori

I caratteri Web sono un ottimo modo per mantenere il testo nelle tue e-mail sia brandizzato che accessibile. Ma come puoi vedere da questo post, ci sono molte sfumature da considerare. Ecco perché è altrettanto importante...

Mettiti sempre alla prova!

Abbiamo fatto del nostro meglio per testare una serie di circostanze diverse, ma il tuo ESP potrebbe distorcere il tuo codice in un modo inaspettato. Assicurati di testare le tue email prima di inviarle per assicurarti che tutti i tuoi fallback funzionino correttamente.

Test di qualità dei caratteri web nelle tue e-mail

L'hai fatto bene? Scoprilo con una prova gratuita di Litmus. Visualizza in anteprima l'aspetto delle tue e-mail in oltre 90 client di posta, app e dispositivi. E mantieni la reputazione del tuo marchio con e-mail impeccabili.

Inizia la tua prova gratuita di Tornasole →

L'aggiunta di caratteri web vale la pena come un grande miglioramento progressivo per aiutarti a fornire la migliore esperienza per i tuoi abbonati nelle loro caselle di posta. Divertiti! E facci sapere se hai domande o commenti qui sotto.

Pubblicato originariamente l'11 aprile 2019 da Jaina Mistry. Ultimo aggiornamento 23 aprile 2021.