Come aggiungere caratteri personalizzati nei modelli di e-mail

Cosa imparerai

Scopri come aggiungere nuovi tipi di caratteri all'editor dei modelli di e-mail di Klaviyo, in modo che le tue e-mail rispecchino lo stile del tuo marchio. In questo articolo scoprirai anche quali sono i compromessi nell'utilizzo di caratteri personalizzati e come scegliere un carattere supportato dalla più ampia gamma di caselle di posta in arrivo.

Nelle tue e-mail puoi utilizzare Google Fonts, Adobe Typekit o caratteri importati (cioè self-hosted). Tuttavia, tieni presente che solo alcune caselle di posta e-mail supportano i caratteri personalizzati e molti client popolari (come Gmail e Yahoo) non li supportano.

This content requires Functional cookies to be enabled.

Update Cookie Settings

Termini chiave

• Carattere personalizzato
  Qualsiasi carattere che non sia fornito di default nell'editor di Klaviyo
• Carattere web
  Un carattere personalizzato che deve essere caricato da una fonte esterna
• Carattere compatibile con il web
  Un carattere memorizzato localmente sulla maggior parte dei dispositivi che quindi non deve essere caricato da una fonte esterna per essere visualizzato
• Carattere di riserva
  Un carattere compatibile con il web utilizzato nelle caselle di posta elettronica che non supportano il tuo specifico carattere personalizzato

Supporto e limitazioni dei caratteri personalizzati

I caratteri personalizzati possono contribuire a un approccio di marketing uniforme, allineando i contenuti delle e-mail con quelli dell'e-commerce. Tuttavia, i caratteri web (ossia i caratteri caricati da una fonte esterna non disponibili nella memoria di un dispositivo) potrebbero non essere visualizzati come previsto su tutti i dispositivi o client e-mail. I caratteri predefiniti di Klaviyo sono preinstallati sulla stragrande maggioranza dei computer e dei dispositivi, quindi puoi offrire un'esperienza uniforme per tutti gli iscritti.

I client e-mail che supportano i caratteri web includono:

• Apple Mail
• iOS Mail (l'app e-mail predefinita su iOS)
• Google Android (tranne Android 2.3, che non supporta il metodo @import utilizzato da Google e Adobe per i caratteri)
• Samsung Mail (Android 8.0)
• Outlook per Mac

Caratteri personalizzati in Gmail e altre caselle di posta non supportate

I destinatari che utilizzano Gmail (o altre caselle di posta elettronica che non supportano i caratteri personalizzati) potrebbero visualizzare un carattere di riserva anziché il carattere personalizzato da te scelto. Puoi impostare il carattere di riserva nel tuo modello di e-mail. Per evitare che accada, valuta di selezionare un font personalizzato sicuro per il web, disponibile sulla maggior parte dei dispositivi indipendentemente dal supporto dei font web.

Scopri i caratteri compatibili per il web, insieme a una panoramica del supporto per dispositivo.

Aggiungi un nuovo carattere personalizzato nell'editor dei modelli di e-mail

Per aggiungere un carattere personalizzato a un modello e-mail:

1. Seleziona un blocco di testo nel tuo modello oppure apri le impostazioni Stili del tuo modello.
2. Nel menu a discesa dei font, fai clic su Modifica i font predefiniti. Nel pannello Caratteri, fai clic su Aggiungi carattere.
3. Nella finestra modale che appare, scegli Google Fonts, Adobe Fonts o Importa font, a seconda dell'origine del tuo font.
4. Segui le istruzioni nelle sezioni qui sotto per il tuo tipo di carattere (Google, Adobe o caratteri importati).

Una volta aggiunto un carattere ai modelli di e-mail, questo diventa disponibile per tutti gli altri modelli e anche per i moduli di iscrizione.

This content requires Functional cookies to be enabled.

Update Cookie Settings

Gestisci i caratteri personalizzati

Puoi modificare o eliminare i tuoi font personalizzati in Contenuti > Media e brand, nella sezione Brand.

Aggiornamento di un carattere esistente

Per selezionare ulteriori varianti per un carattere personalizzato di Google o un carattere importato che hai già aggiunto:

1. Vai su Contenuti > Media e marchio in Klaviyo.
2. Apri la scheda Brand, quindi seleziona Fonts. Se invece la scheda Brand mostra Style, aprila e trova la sezione Fonts.
3. Trova il carattere che desideri modificare nella sezione Caratteri.
4. Fai clic sul menu a 3 puntini accanto al carattere.
5. Clicca su Modifica nel menu che appare.
6. Per un font Google, apri Varianti e seleziona le varianti aggiuntive che vuoi usare.
7. Per un font importato, fai clic su Aggiungi variante di font, quindi inserisci il suo URL di origine e seleziona il suo Peso del font e Stile del font. Ripeti l'operazione per ogni variante che vuoi aggiungere.
8. Clicca su Salva.

Non puoi aggiungere le varianti a un carattere Adobe in Klaviyo, perché le sue varianti provengono dal link di Typekit. Puoi modificare il suo font di fallback in Klaviyo.

Se appare il messaggio di errore: Esiste già un carattere con questo nome, segui i passi precedenti per modificare la versione già in uso del carattere, anziché aggiungerlo nuovamente.

Eliminazione di un carattere

L’eliminazione di un font personalizzato influisce sui contenuti che lo utilizzano, inclusi altri modelli e moduli d'iscrizione. Questi contenuti utilizzeranno il relativo font di fallback quando il font personalizzato non sarà più disponibile. Aggiungere di nuovo la stessa famiglia di font e le stesse varianti lo rende nuovamente disponibile per i contenuti che lo utilizzano ancora.

1. Vai su Contenuti > Media e marchio in Klaviyo.
2. Apri la scheda Brand, quindi seleziona Fonts. Se invece la scheda Brand mostra Style, aprila e trova la sezione Fonts.
3. Trova il carattere che desideri eliminare nella sezione Fonts.
4. Fai clic sul menu a 3 puntini accanto al carattere.
5. Clicca su Elimina nel menu che appare.
6. Fai clic su Elimina di nuovo nella finestra di dialogo di conferma.

Aggiungi un carattere di Google

Per aggiungere un carattere di Google:

1. Apri Nome carattere, cerca il carattere Google che vuoi e selezionalo.
2. Per aggiungere varianti come grassetto o corsivo, espandi N. varianti del carattere disponibili e seleziona le varianti che vuoi usare.
3. Scegli un carattere di riserva.
4. Clicca su Aggiungi carattere.

Aggiungi un carattere di Adobe

I caratteri di Adobe sono disponibili solo per gli utenti che hanno un abbonamento attivo ad Adobe Fonts. Per aggiungere un carattere di Adobe:

1. Seleziona Adobe Fonts nella finestra di dialogo Aggiungi font se non è già selezionato.
2. Incolla l’URL del tuo progetto web Adobe in Indirizzo CSS. Usa il formato https://use.typekit.net/abcdefg.css.
3. Fai clic su Continua per caricare i font nel progetto.
4. Scegli un font di fallback per ogni font che non è stato ancora aggiunto.
5. Clicca su Aggiungi carattere.

Aggiungi un carattere importato

I caratteri importati, chiamati anche caratteri in self-hosting, sono consigliati solo ai mittenti che dispongono di uno sviluppatore. Non è possibile caricare direttamente il file del carattere su Klaviyo. Se non hai accesso a un team di sviluppatori, ti consigliamo di trovare un carattere Google o Adobe simile al carattere desiderato.

Per utilizzare un carattere importato:

1. Ospita il carattere sui tuoi server o tramite un servizio di hosting per caratteri. Assicurati di abilitare la condivisione delle risorse tra origini incrociate (CORS) impostando l'intestazione Access-Control-Allow-Origin su *, in modo che il carattere sia accessibile alle caselle di posta dei destinatari. Scopri di più su CORS.
2. Una volta che il carattere è stato collocato in hosting, apri Importa carattere nella finestra di dialogo Aggiungi carattere e incolla l’URL diretto del file del carattere in Indirizzo sorgente. L'URL deve rimandare a un file .woff, .woff2, .ttf o .eot.
3. Aggiungi il nome, lo spessore e lo stile del carattere nei campi corrispondenti.
4. Per aggiungere un’altra variante, fai clic su Aggiungi variante di carattere e inserisci l’indirizzo di origine, lo spessore e lo stile. Usa un URL di file di carattere diverso e una combinazione di spessore/stile per ogni variante.
5. Scegli un carattere di riserva.
6. Clicca su Aggiungi carattere.

Informazioni sui caratteri di riserva

Con tutti i tipi di caratteri personalizzati, è necessario selezionare un carattere di riserva. Questo carattere viene visualizzato dai destinatari che utilizzano client che non supportano il carattere personalizzato da te selezionato. Scegli un carattere simile al tuo carattere personalizzato dall'elenco delle opzioni disponibili.

Ad esempio, se usi Poppins (un carattere di Google) come carattere personalizzato e Arial come carattere di riserva, i destinatari delle e-mail vedranno i seguenti caratteri:

• I destinatari che aprono la tua e-mail in un client di posta elettronica che supporta i caratteri web (ad esempio Apple Mail, iOS Mail) visualizzeranno Poppins
• I destinatari che aprono la tua e-mail in un client di posta elettronica che non supporta i caratteri web (ad esempio Gmail) visualizzano Arial

Come applicare un carattere personalizzato

Una volta impostato un carattere personalizzato, puoi applicarlo a qualsiasi testo nel tuo modello, inclusi:

• Stili del modello principale
• Stili di qualsiasi blocco
• Una parte di testo specifica all'interno di un blocco di testo
• A blocchi di pulsanti, blocchi di prodotti e qualsiasi altro tipo di blocco contenente testo

Per applicare un carattere personalizzato in un blocco di testo:

1. Seleziona il blocco di testo contenente il testo a cui vuoi applicare il carattere.
2. Evidenzia la parte di testo specifica a cui vuoi applicare il carattere.
3. Seleziona il carattere personalizzato dal menu a discesa.

Per tutti gli altri tipi di blocco o per gli stili di blocco e di modello, seleziona il carattere dall'apposito menu a discesa.

Per i blocchi tabella e split, seleziona il testo nell’area di progettazione dell’e-mail per modificarlo e applicare il tuo font personalizzato.

Anteprima dei caratteri personalizzati

Una volta che il tuo modello è pronto, fai clic su Anteprima, inserisci il tuo indirizzo e-mail nella barra laterale dell'anteprima e fai clic su Invia test. Prova ad aprire il messaggio su vari dispositivi per vedere come apparirà ai diversi destinatari. Puoi anche usare uno strumento come Email on Acid per visualizzare l'anteprima su una più ampia varietà di dispositivi.

Risorse aggiuntive

• Guida all'editor di modelli di e-mail
• Come funzionano i caratteri nelle e-mail