timer ~ 8 minuti letti
103507 visualizzazioni
valutalo
15 novembre 2022

Come Aggiungere e Utilizzare Caratteri Personalizzati con Stripo

Stripo / Blog / Come Aggiungere e Utilizzare Caratteri Personalizzati con Stripo

Il 26 Novembre 2018 abbiamo rilasciato una nuova funzionalità — ora con Stripo puoi aggiungere caratteri personalizzati alle tue email in pochi click senza competenze HTML. Perché è importante?

Non è un segreto che un bel testo integri il design dell'email e convinca i clienti ad effettuare un acquisto.

Di solito, nel testo si utilizzano caratteri personalizzati coerenti con il marchio e accattivanti. Utilizzando un carattere che si adatta meglio alla situazione e al design dell'email, si mette il testo in evidenza migliorando l’aspetto. Pertanto, molto spesso, i caratteri cosidetti “web-safe” non sono sufficienti.

Esempio di Banner con Caratteri Personalizzati _ Stripo

In questo caso, è necessario utilizzare dei caratteri personalizzati.

Guarda un breve video che spiega come aggiungere i caratteri personalizzati con Stripo. Tieni presente che questa funzione è disponibile solo per i piani a pagamento.

Come aggiungere caratteri personalizzati con Stripo

La maggior parte degli ESP e dei costruttori di email offre solo caratteri “web-safe”, mentre Stripo ne offre quattro set:

I set di caratteri offerti da Stripo

Stripo offre quattro set di caratteri per le tue email:

1. Carattere standard/ web-safe

Arial, Comic Sans MS, Courier New, Georgia, Helvetica, Lucida Sans Unicode, Tahoma, Times New Roman, Trebuchet MS e Verdana sono i caratteri più famosi, poiché sono ampiamente utilizzati dai siti Web e vengono visualizzati correttamente dalla maggior parte dei client di posta elettronica.

Caratteri Personalizzati Arial _ Stripo

2. Caratteri non standard

Sono dei caratteri su cui alcuni professionisti discutono ancora sul fatto che siano web safe o no. Ma sono comunemente usati sul web. Ad esempio, Playfair Display è presente su quasi 1,1 miliardi di siti Web, famoso principalmente negli Stati Uniti e nell'Europa Occidentale.

Visualizzazione dei Caratteri Personalizzati Fiera _ Stripo

Nota: sapevi che puoi diminuire il numero di caratteri standard e non standard per i tuoi progetti se li ritieni eccessivi?

Come rimuovere i caratteri non necessari dalla lista:

  • vai alle impostazioni del progetto nel tuo account;
  • trova la scheda dei caratteri standard/non standard;
  • fai click sul pulsante di commutazione per rimuovere il carattere dalla lista.

3. Caratteri per i banner

Sono decorativi e possono essere applicati solo ai banner, poiché qualsiasi testo posizionato sopra i banner viene considerato un elemento dell'immagine. Di conseguenza, verrà visualizzato correttamente su tutti i dispositivi, indipendentemente dal tipo di carattere applicato.

Stripo ne offre oltre 40.

Caratteri Personalizzati per i Banner Esempio di Carattere _ Stripo

L'elenco di questi caratteri viene visualizzato solo quando si lavora con una didascalia in un banner.

4. Caratteri personalizzati

Con Stripo puoi aggiungere qualsiasi tipo di carattere.

Non ci sono limiti al numero di caratteri personalizzati che puoi aggiungere.

Una volta installati i nuovi caratteri, applicali al menu e ai testi, a tutti i testi nelle email ad accezione dei banner.

Come aggiungere un carattere personalizzato alle impostazioni del tuo progetto con Stripo:

Ancora una volta, voglio sottolineare che si tratta di un processo molto semplice, in quanto non è necessario apportare alcuna modifica al codice HTML dell'email. Un'altra grande novità è che non devi impostare gli stessi nuovi caratteri per ogni modello di email con cui si lavora — si impostano per interi progetti. Sono disponibili nella tua lista per tutte le campagne all'interno di questi progetti.

Passaggio 1. Google

Innanzitutto, devi trovare il carattere che preferisci. Mi è piaciuto molto il Great Vibes che ho trovato su Google Fonts. Oltre a più di 1.000 carateri, Google offre anche abbinamenti popolari insieme ad essi.

  • quindi, è necessario selezionare il carattere, scorrere fino alla sezione "Stili" e fare click sul segno "più";

Caratteri Personalizzati di Google _ Stripo

  • quindi, fai click sull'icona "Visualizza famiglie selezionate" nell'angolo in alto a destra della pagina web;

Visualizza Famiglie Selezionate in Google Fonts

  • in una finestra pop-up, copia il link — è evidenziato nello screenshot qui in basso.

Caratteri Personalizzati Stripo _ Incorporamento del Link

Passaggio 2. Stripo

Per installarlo sul tuo account con Stripo:

  • fai click sul nome dell'account nell'angolo in alto a destra dello schermo;
  • seleziona “Impostazioni organizzazione”;

Aggiunta di un Carattere Personalizzato al tuo Account Stripo

  • a sinistra, vedrai "Progetti" — fai click su questa scheda;

Caratteri Personalizzati Stripo _ I Tuoi Progetti

  • seleziona il progetto che intendi migliorare con un nuovo carattere (Io ne ho solo uno);
  • fai click sul pulsante "Impostazioni";

Caratteri Personalizzati _ Impostazioni del Progetto nell'Account Stripo

  • scorri verso il basso alla sezione “Gestione dei caratteri”;
  • fai click sul pulsante "Aggiungi carattere personalizzato" (Io ho già tre caratteri personalizzati);

Caratteri Personalizzati Stripo _ Clicca per Aggiungere il Tuo Carattere Personalizzato

  • nel modulo pop-up, assegna un nome al carattere, inserisci il link URL di incorporamento e inserisci la famiglia di caratteri specificata da Google;

Collegamento del Tuo Carattere Personalizzato

Nota: per tua comodità, ti consigliamo vivamente di dare nomi reali ai caratteri caricati.

  • una volta compilati correttamente tutti i campi, fai click su "Connetti".

Troverai i nuovi caratteri nella lista a tendina durante la modifica della tua email.

Come aggiungere caratteri personalizzati non presenti su Google Fonts alle impostazioni del tuo progetto con Stripo

Se non riesci a trovare l'opzione perfetta su Google Fonts, non preoccuparti! Puoi aggiungere qualsiasi carattere personalizzato al tuo account Stripo caricando un link a questo carattere.

Puoi anche utilizzare i tuoi caratteri personalizzati:

  • carica i file dei caratteri per aprire una piattaforma di archiviazione cloud o di condivisione file;
  • assicurati che i file siano disponibili per la visualizzazione in modo che gli utenti possano vederli;
  • Aggiungi l’Intestazione Access-Control-Allow-Origin ai tuoi file dei caratteri per evitare che vengano bloccati dal browser;
  • aggiungi i link al tuo account Stripo nel modo descritto sopra. Assicurati che i tuoi link inizino con "https" e non siano racchiusi tra virgolette.

Ecco un esempio di come aggiungere un carattere personalizzato al tuo account Stripo con Adobe Fonts:

  • vai su Adobe Fonts;
  • scegli il carattere che preferisci e premi il pulsante </>;

Scegli il Tuo Carattere Personalizzato in Adobe Fonts

  • inserisci il nome del tuo progetto;
  • scegli la dimensione e gli stili dei caratteri;
  • fai click sul pulsante "Crea";

Adobe Fonts _ Aggiungere un Carattere Personalizzato ad un Progetto Web

  • copia il link;

Adobe Fonts _ Copiare il Link

  • segui gli stessi passaggi che abbiamo descritto in precedenza per aggiungere questo carattere al tuo account Stripo.

Nota: se desideri utilizzare i caratteri di Adobe Fonts, non potrai farlo senza un abbonamento a Creative Cloud.

Attivazione dei caratteri in Adobe Fonts

Come utilizzare i caratteri personalizzati nelle email

Puoi applicare qualsiasi tipo di carattere che desideri a blocchi di testo e menu per rendere le tue email efficaci ed uniche. Ma assicurati di testarli per verificare la compatibilità con i migliori client di posta elettronica.

Nota: se un client di posta elettronica non supporta il carattere che hai scelto, il client lo sostituirà con uno predefinito (la maggior parte dei client di posta elettronica ha due caratteri predefiniti).

Stripo non solo ti consiglia vivamente di testare email/carattere con Email on Acid o Litmus, ma anche di inviare questa email a tutti i tuoi indirizzi email per verificare, in pratica, come appare il carattere.

Per il mio test ho scelto il carattere Alumni Sans. Il Nostro strumento di test email ha mostrato che la maggior parte dei dispositivi e dei client di posta elettronica sostituisce questo carattere con quelli predefiniti. Dagli screenshot qui sotto, puoi vedere che Apple Mail ha visualizzato correttamente il carattere Alumni Sans, mentre Outlook 2019 lo ha sostituito con il suo carattere predefinito.

Test dei Caratteri Personalizzati in Diversi Client di Posta Elettronica

Client di posta elettronica che supportano i caratteri personalizzati nelle email

Ce ne sono solo alcuni:

  • Apple Mail (carattere predefinito — Helvetica);
  • Apple iPhone (carattere predefinito — Helvetica);
  • Thunderbird (carattere predefinito — Impact);
  • App Outlook per Android, iOS e Mac (carattere predefinito: Calibri);
  • App email di default per Android (carattere predefinito — Roboto).

Nota: non puoi essere completamente sicuro che il tuo carattere personalizzato sia supportato da questi client di posta elettronica, quindi è fondamentale testare la tua email prima di inviarla.

Quando scegli un nuovo carattere per le email, ricorda:

  1. Solo alcuni client di posta elettronica supportano i caratteri personalizzati.
  2. I caratteri sans-serif forniscono una percezione di semplicità e sono più appropriati per testi formali e newsletter aziendali.
  3. Richiede più tempo leggere un testo scritto in serif per le persone con disabilità visive e dislessiche, ma funziona meglio nelle email promozionali.
  4. Per le email HTML, la dimensione del carattere migliore è 14 px, mentre per i dispositivi mobili è 16 px.
  5. Per rendere le tue email accessibili, evita sfondi bianchi e testi allineati al centro.
  6. Nel tuo account Stripo, puoi aggiungere nuovi caratteri e rimuovere quelli che non usi per determinati progetti.

Riassumendo

I caratteri personalizzati possono essere uno strumento fantastico per rendere le tue email professionali e uniche, ma è fondamentale testarle prima di inviarle. Aggiungi caratteri decorativi al tuo account e usali per rendere più accattivante i tuoi modelli di email newsletter.

Arricchisci le tue email con caratteri personalizzati

Dave Myron 2 anni fa

Can you update this article to include using non-Google custom fonts?

Hanna Kuznietsova ha commentato Dave Myron 2 anni fa

Dave, Hello... Thank you for your question. We will update the post soon ? As for non-Google custom fonts: You can add custom fonts to your Stripo account only by uploading a link to the selected font. For example, the Adobe Fonts site https://fonts.adobe.com/collections offers links to the fonts and their description ("font-family") for entering information in the proper fields. The embedding link provided by Adobe Fonts needs to be converted to the format specified in the article or input field: it must start with https; no quotes before and after the link. Please do everything as you would do to Google Fonts, as shown in the video. https://www.youtube.com/watch?v=U2X3CLN01zA You can also use your fully custom fonts. Just upload them on your website, and then add the link to your Stripo account. Proven - Adobe fonts work well :) If you need more detailed instructions with screenshots, please write to us at contact@stripo.email.

Reinhard Jung 2 anni fa

Hey, thanx a lot!

Hanna Kuznietsova ha commentato Reinhard Jung 2 anni fa

Reinhard, Thanks for your supportive feedback. We're glad you liked it :)

Arsen Malashchuk 3 anni fa

А если понравившийся шрифт не представлен на Google Fonts, как тогда его добавить?

Hanna Kuznietsova ha commentato Arsen Malashchuk 3 anni fa

Arsen, Спасибо за обращение. Добавлять кастомные шрифты в Ваш аккаунт в Stripо можно только лишь подгружая ссылку на выбранный шрифт. Например, сайт Adobe Fonts https://fonts.adobe.com/collections предлагает именно ссылки к шрифтам и их описание ( "font-family", обычный это шрифт или курсив) для введения информации в соответствующие поля. Ссылку для встраивания, которую предоставит Adobe Fonts, вам нужно привести к формату, который обозначен в статье или поле для введения: начинаться она должна с https; никаких кавычек до и после ссылки. Делайте, пожалуйста, все по аналогии со шрифтами Google Fonts, как показано в видео. https://www.youtube.com/watch?v=U2X3CLN01zA Проверено — шрифты Adobe подгружаются и работают :) Если же Вам понадобится более подробная инструкция со скриншотами, — пожалуйста, пишите нам на contact@stripo.email. Будем рады помочь.

Евгения Землянская ha commentato Hanna Kuznietsova 2 anni fa

а если есть только файл со шрифтом? Его никак не загрузить?

Hanna Kuznietsova ha commentato Евгения Землянская 2 anni fa

Евгения, Спасибо за Ваш вопрос. Для использования кастомного шрифта, нужна именно ссылка на него, которая заканчивается на .css Если же Вам не подходят шрифты Google и Adobe, то Вы можете загрузить кастомный шрифт на свой сайт. И дальше добавить его в личный кабинет Stripo согласно инструкции, приведенной в данной статье. Важно: доступ к данному шрифту должен быть открыт всем.

Potresti essere interessato a

indietro avanti
banner9
06 giugno 2022 · 15 minuti letti
I 10 migliori generatori di modelli di e-mail per il 2022

Tutti i generatori di modelli di e-mail vi sembrano uguali? Siete confusi su quale scegliere per le vostre campagne, vero? Non c'è da stupirsi, visto che ce ne sono così tanti. Faremo un'indagine sui generatori più popolari per trovare le loro caratteristiche distintive e aiutarvi a trovare il miglior creatore di e-mail HTML per le vostre esigenze attuali. Proverò a creare un modello in tutti questi editor con gli stessi file multimediali per vedere se tali realizzatori sono diversi l’uno...

Design Marketing Modelli
best-fonts-for-email-cover-image-stripo
24 maggio 2022 · 18 minuti letti
I migliori caratteri per e-mail: suggerimenti e trucchetti per l'utilizzo

Una delle preoccupazioni maggiori durante il processo di realizzazione di una email è la scelta del carattere giusto. Dimensione, colore, forma, spaziatura... Conta tutto? Sì, ma una delle cose fondamentali è quella di scegliere un carattere leggibile. In questo post, ti mostreremo come scegliere il carattere più professionale per le tue email. Progettate email eleganti con Stripo in pochissimo tempo grazie ai nostri modelli precostituiti Sfoglia   Caratteri nelle e-mail HTML: regole generali da seguire Ci sono tre regole di...

Design Marketing
Greatest Examples of GIF animations in Emails_Cover Image
27 ottobre 2021 · 10 minuti letti
16 Ottimi Esempi di Animazione GIF nelle Email

Le GIF nelle email sono di grande utilità se si vuole mostrare il proprio prodotto, attirare l'attenzione degli utenti su determinati elementi o semplicemente decorare leggermente il tuo testo. In questo articolo, ti mostriamo alcuni dei migliori esempi di animazione gif nelle email. Esempi di Animazioni GIF nelle email Ecco una raccolta dei migliori esempi con GIF nelle email. Ogni GIF svolge la sua missione. 1. Adidas (Fonte: email da Adidas) Adidas ha utilizzato le animazioni nelle email per mostrare...

Design Marketing
08 aprile 2021 · 17 minuti letti
14 migliori esempi di design di firme e-mail

Una buona firma email ci aiuta a costruire il nostro business e a fare una buona impressione sui clienti. Poiché questo è l'ultimo elemento che le persone vedono nelle e-mail, dovremmo rendere le nostre firme personali creative e memorabili. Esaminiamo i migliori esempi di firma e-mail e il loro uso appropriato nelle e-mail e nei modelli di newsletter per email. Va detto che tutte le tipologie di aziende richiedono firme email professionali con informazioni di contatto dettagliate. Usa questo modello...

Design Marketing Modelli
Rimani sempre informato sulle ultime notizie, alle guide, agli articoli e alle tecniche relativi all'email marketing