Design Modelli How-to
~ 6 minuti letti
81326 visualizzazioni
valutalo
06 dicembre 2018

Come aggiungere e usare font personalizzati su Stripo

Stripo / Blog / Come aggiungere e usare font personalizzati su Stripo

Il 26 novembre abbiamo lanciato una nuova opzione: adesso con Stripo.email puoi aggiungere font personalizzati ai progetti, in soli pochi click e senza bisogno di conoscere l’HTML. Perché è un cambiamento importante questo?
È noto che un buon testo è un elemento fondamentale del design dell’email, e ha il compito di convincere i clienti ad effettuare un acquisto.
È utile far sì che il testo abbia un buon impatto emotivo. Usando un font adatto alla situazione e al design dell’email, rendi il testo ben visibile, bello e piacevole. E spesso i font compatibili con il web non sono abbastanza a venire incontro a queste esigenze.

Stripo-Custom-Fonts-Banner-Example

In questo caso dovrai usare font personalizzati.

La gran parte dei fornitori di servizi email e dei builder di email mettono a tua disposizione solo font per il web, mentre Stripo.email ne offre di 4 tipi.

Categorie di font messi a disposizione da Stripo

Stripo mette a tua disposizione 4 set di caratteri per le tue email:

1. Font standard/adatti al web

Arial, Comic Sans MS, Courier New, Georgia, Helvetica, Lucida Sans Unicode, Tahoma, Times New Roman, Trebuchet MS, e Verdana sono i font più popolari, usati moltissimo sui siti web e visualizzati correttamente dalla gran parte dei client di email.

Stripo-Custom-Fonts-Arial

2. Font non standard

In questa categoria troviamo i 10 font che alcuni professionisti ritengono far parte dei font adatti al web, mentre altri non sono d’accordo. Sono, però, molto diffusi sul web. Per fare un esempio, Playfair Display è presente in quasi 1,1 miliardi di siti web, ed è molto popolare negli Stati Uniti e nell’Europa Occidentale.

Stripo-Custom-Fonts-Display-Fair

Nota: sapevi che puoi diminuire il numero di caratteri standard e non standard per i tuoi progetti, se ritieni siano troppi?
Dal tuo account:

  • vai alle impostazioni del progetto;
  • trova la scheda dei caratteri standard/non standard;
  • clicca sul pulsante switch per rimuovere i font dalla tua lista.

3. Font per i banner

Questi sono font decorativi, applicabili solo ai banner, dato che qualsiasi testo posizioni sopra un banner sarà considerato un elemento dell’immagine. Questo significa che, a prescindere dal font che scegli, verrà visualizzato correttamente su tutti i dispositivi. 
Stripo offre più di 40 font in questa categoria.

Stripo-Custom-Fonts-Banner-Font-Example

Potrai visualizzare l’elenco di questi font solo quando stai lavorando a una didascalia per un banner.

4. Font personalizzati

Usando Stripo puoi aggiungere qualsiasi font ti venga in mente.
Non c’è alcun limite al numero di font personalizzati che puoi aggiungere.
Una volta installati nuovi font, puoi usarli nel menu, nei testi, in tutti gli elementi testuali delle email eccetto i banner.

Come aggiungere un font personalizzato al tuo progetto con Stripo:

Una volta di più, vale la pena sottolineare che si tratta di un processo molto semplice. Non dovrai far alcuna modifica al codice HTML delle email. Un’altra buona notizia: non dovrai impostare i font nuovi per ogni modello di email a cui lavori, puoi impostarli per progetti interi. Saranno disponibili nella tua lista per tutte le campagne che avvii all’interno di quei progetti.
Per prima cosa trova il font che ti piace di più. A me è piaciuto tanto il font Great Vibes, che ho trovato su Google.fonts. Su quel sito, non solo Google ti offre circa mille font, ma ti indica anche i possibili accoppiamenti popolari.
Seleziona il font che preferisci, poi clicca sul pulsante “+”.

Stripo-Custom-Fonts-Google

Nella finestra pop-up copia il link – come evidenziato nello screenshot qui sotto.

Stripo-Custom-Fonts-Embedding-the-Link

Per aggiungerlo al tuo account di Stripo, devi:

  • cliccare sul nome dell’account nell’angolo in alto a destra dello schermo;
  • selezionare “Impostazioni dell’organizzazione”;

Stripo-Custom-Fonts-in-Emails-Account

  • sulla sinistra, vedrai “Progetti” — cliccaci;

Stripo-Custom-Fonts-Projects

  • seleziona il progetto che vuoi arricchire con il font nuovo (io ne ho solo uno);
  • Clicca sul pulsante “Impostazioni” (icona con ingranaggio);

Stripo-Custom-Fonts-Project-Settings

  • scrolla fino a vedere la sezione chiamata “Gestione dei font”;
  • clicca sul +, “Aggiungi font personalizzato” (io ne ho già tre);

Stripo-Custom-Fonts-Click-to-Add-Custom-Font

  • nel modulo pop-up che appare, inserisci l’URL che hai copiato e il nome della famiglia di font stabilito da Google.

Stripo-Custom-Fonts-Adding-Custom-Font

Nota: ti consigliamo caldamente di dare ai font caricati il loro nome vero.
Una volta che hai compilato i campi correttamente, clicca su “connetti”.
Ora troverai i font nuovi nella lista a cascata dei font.

Come usare i font personalizzati

Puoi applicare qualsiasi font preferisci ai blocchi testuali e ai menu, per rendere più vivaci e uniche le tue email. Assicurati, tuttavia, di testarne la compatibilità sui client di email più diffusi.
Nota: se un client di email non supporta il font che hai scelto, verrà rimpiazzato con un font predefinito del client (la maggior parte dei client ha due font predefiniti).
Oltre a consigliarti vivamente di testare le email e i font su Email on Acid o su Litmus, ti suggeriamo di inviare l’email ai tuoi indirizzi, così potrai vedere in prima persona quale aspetto avrà il font che hai scelto.
Per il mio test ho scelto il font Great Vibes. Lo strumento con il quale ho testato il font ha evidenziato che la maggioranza dei dispositivi e dei client rimpiazza il font Great Vibes con il font predefinito, Arial (se il tuo sistema operativo non ha Arial, Gmail passa a Helvetica). Ma il mio font personalizzato funzionava bene nella mia casella di Posta in Arrivo.

Stripo-Custom-Fonts-Example

(Client di email — Gmail; Sistema operativo — Windows 10).

Quando scegli un font nuovo per le email, ricorda:

  1. I caratteri sans serif, anche detti “senza grazie”, favoriscono la percezione, e sono più adatti a testi formali e a newsletter finanziarie;
  2. Ci vuole più tempo per leggere un testo scritto con font serif, o “con grazie”, ma questi caratteri sono migliori per le email promo;
  3. Per le email in HTML, la miglior dimensione del carattere è 14px, ma 16px sui dispositivi mobili;
  4. Per rendere visibili le tue email, evita gli sfondi bianchi e i testi allineati al centro;
  5. Dal tuo account di Stripo, puoi aggiungere font nuovi e rimuovere quelli che non usi.

Usa qualche font decorativo per rendere più vivaci i tuoi modelli di email per newsletter.

Dave Myron 1 anno fa

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

Hanna Kuznietsova ha commentato Dave Myron 1 anno 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 · 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
24 maggio · 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 Modelli
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