- Knowledge base
- Contenuto
- Sito web e landing page
- Utilizzo dei caratteri in HubSpot
Utilizzo dei caratteri in HubSpot
Ultimo aggiornamento: 1 luglio 2026
Disponibile con uno qualsiasi dei seguenti abbonamenti, tranne dove indicato:
I caratteri in HubSpot sono disponibili in diversi modi a seconda del tipo di contenuto e del tipo di carattere. Alcuni caratteri predefiniti sono disponibili in tutti gli editor di contenuti. Potrebbe essere necessario aggiungere i font web e i font personalizzati alle impostazioni del tema, ai fogli di stile, ai moduli personalizzati o ai modelli di codice.
Prima di iniziare
Prima di iniziare a utilizzare i font in HubSpot, ti invitiamo a prendere visione dei requisiti e delle considerazioni da tenere presenti.
Autorizzazioni richieste A seconda del contesto in cui viene utilizzato il font, un utente potrebbe aver bisogno di autorizzazioni aggiuntive:
- Per poter utilizzare i font nei moduli di testo formattato nei rispettivi tipi di contenuto (ad esempio, post blog o landing page) è necessaria l'autorizzazione di modifica e pubblicazione .
- Per poter utilizzare i caratteri nei temi è necessaria l'autorizzazione per le impostazioni globali relative ai contenuti e ai temi .
- Per poter utilizzare i font nei fogli di stile, nei modelli personalizzati o nei moduli personalizzati, è necessaria l'autorizzazione per gli strumenti di progettazione .
Comprendere limiti e considerazioni
- Non tutti i tipi di contenuto sono disponibili in tutti gli account. Per verificare quali tipi di contenuti sono disponibili per il tuo abbonamento, consulta il Catalogo dei servizi di Product & .
- Recensione della tabella qui sotto per capire quali opzioni di carattere sono disponibili per ciascun tipo di contenuto:
| Tipo di contenuto | Tipo di carattere | |||
| Caratteri predefiniti | Font web |
Caratteri personalizzati |
||
| Pagina - modelli di tema | ✓ | Disponibile nelle impostazioni del tema e tramite foglio di stile | ✓ | |
| Pagina - modello con codice | ✓ | Disponibile tramite foglio di stile o modulo personalizzato | Disponibile tramite foglio di stile | |
| Blog | ✓ | Disponibile tramite foglio di stile o modulo personalizzato | ✓ | |
| Alcuni caratteri predefiniti non sono disponibili nell'editor drag-and-drop di email | Disponibile solo per i modelli di email personalizzati; non supportato dalla maggior parte dei client di posta elettronica | Disponibile solo per i modelli di email personalizzati; non supportato dalla maggior parte dei client di posta elettronica | ||
| Base di conoscenze | I caratteri non possono essere personalizzati nell'editor degli articoli | Disponibile nelle impostazioni del tema | Disponibile nelle impostazioni del tema | |
| Modulo personalizzato | ✓ | Disponibile per i moduli personalizzati non utilizzati nelle e-mail | Disponibile per i moduli personalizzati non utilizzati nelle e-mail | |
| CTA (versione precedente) | ✓ | ✓ | ✓ | |
| CTA | ✓ | ✓ | ✓ | |
Utilizza i caratteri predefiniti nei moduli di testo formattato
I caratteri predefiniti sono supportati in tutti i contenuti di HubSpot, anche se le opzioni disponibili e i contesti in cui è possibile applicarli dipendono dal tipo di contenuto.
-
Vai al tuo contenuto:
- Pagine del sito web: Nel tuo account HubSpot, fai clic su Altro, quindi vai a Contenuti > Pagine del sito web. Se Altro non compare nel tuo account, vai direttamente a Contenuti > Pagine del sito web.
- Landing Page: Nel tuo account HubSpot, fai clic su Altro, quindi vai a Contenuti > Landing page. Se Altro non appare nel tuo account, vai direttamente a Contenuti > Landing page.
- Blog: Nel tuo account HubSpot, fai clic su Altro, quindi vai a Contenuti > Blog. Se Altro non appare nel tuo account, vai direttamente a Contenuti > Blog.
- E-mail: Nel tuo account HubSpot, fai clic su Altro, quindi vai a Marketing > E-mail. Se Altro non compare nel tuo account, vai direttamente a Marketing > E-mail.
- Clicca sul nome del tuo contenuto.
- Nell'editor di contenuti, fai clic su unmodulo di testo formattato, quindi seleziona il testo che desideri modificare.
- Nella barra degli strumenti del testo formattato, fare clic sul menua tendina "Carattere" e selezionare un carattere. Nei moduli di testo formattato sono disponibili i seguenti caratteri:
|
Caratteri predefiniti
|
|
| Caratteri tipografici del brand | Merriweather |
| Andale Mono | Monaco |
| Arial | Simbolo |
| Libro Antiqua | Tahoma |
| Courier New | Terminale |
| Georgia | Times New Roman |
| Helvetica | Trebuchet MS |
| Impatto | Verdana |
| Lato | |
|
Caratteri predefiniti
|
|
| Arial | Merriweather* |
| Courier New | Tahoma |
| Georgia | Times New Roman |
| Helvetica | Trebuchet MS |
| Lato* | Verdana |
| *Disponibile solo come font web nell'editor drag-and-drop di email. | |
Utilizza i font web
I font web sono supportati in alcuni contenuti di HubSpot, ma non sono disponibili nel menu a tendina "Font" dell'editor di testo avanzato. A seconda del tipo di contenuto, i font web possono essere applicati nelle impostazioni del tema, nei fogli di stile, nei moduli personalizzati o nei modelli codificati.
Gli sviluppatori possono utilizzare il campo "font " per aggiungere font web ai temi e ai moduli personalizzati. Quando i font web vengono aggiunti in questo modo, HubSpot li carica direttamente sul dominio del contenuto anziché attingervi da un servizio di terze parti.
Per utilizzare servizi di terze parti come Google Fonts , copia il codice di importazione del font, incollalo nel foglio di stile del contenuto, quindi applica il font tramite CSS:
- Vai su fonts.google.com.
- Nella barra di ricerca, inserisciil nome di unfont.
- Clicca sul nome del font per visualizzare l'elenco degli stili disponibili per l'importazione.
- Fai clic su "Scarica il font" in alto a destra.
- Fai clic su "Ottieni codice di incorporamento" in alto a destra.
- Nella colonna di destra, seleziona @import nella scheda Web .
- Copia il codice @import senza il tag
<style>. - Copia ilcodice della classe Css per impostare le regole Css.
-
Dopo aver copiato il codice da Google Fonts, puoi aggiungere il font ai tuoi contenuti HubSpot:
Utilizzare un font di Google in un foglio di stile
- Copia il codice @import del font da Google Fonts.
- Nel tuo account HubSpot, fai clic su Altro, quindi vai a Contenuti > Design Manager. Se Altro non compare nel tuo account, vai direttamente a Contenuti > Design Manager.
- Nel Finder, apri il foglio di stile utilizzato per i tuoi contenuti.
- Incolla il codice @import nella
riga 1del foglio di stile. - Aggiungi il codice per impostare le regole CSS ai selettori appropriati nel foglio di stile.
- In alto a destra, clicca su "Pubblica modifiche " per rendere effettive le modifiche apportate.
Utilizzare un font di Google in un modello di email personalizzato
Google Fonts è supportato da Apple Mail e da alcuni altri client di posta elettronica, ma la diffusione di tale supporto è limitata. La maggior parte dei client di posta elettronica più diffusi supporta solo i font web predefiniti. Scopri di più su come selezionare i caratteri predefiniti utilizzati nell'editor classico delle e-mail.
Abbonamento richiesto Per creare modelli di email personalizzati con codice è necessario un abbonamento a Marketing Hub Professional o Enterprise .
Per aggiungere un font di Google a un modello di email personalizzato:
- Copia il codice @import del font da Google Fonts.
- Nel tuo account HubSpot, fai clic su Altro, quindi vai a Contenuti > Design Manager. Se Altro non compare nel tuo account, vai direttamente a Contenuti > Design Manager.
- Nel Finder, apri il modello di email personalizzato.
- Nella
<head>sezione del modello, incolla il codice @import tra i tag<style>....</style>tag. - Nella sezione “
<body>” del modello, aggiungi il font personalizzato tramite lo stile inline. - In alto a destra, clicca su " Pubblica modifiche" per rendere effettive le modifiche apportate.
Utilizzare un font di Google in un CTA (versione precedente)
- Copia il codice di Google per impostare le regole CSS relative a quel font.
- Nel tuo account HubSpot, fai clic su Altro, quindi vai a Marketing > CTA. Se Altro non appare nel tuo account, vai direttamente a Marketing > CTA.
- Passa il mouse su un CTA, quindi fai clic su “Azioni” >“Modifica”.
- Nel pannello di destra, fare clic su "Opzioni avanzate".
- Nella casella di testo, incolla il codice di Google per impostare le regole Css relative a quel font.
- In basso a destra, fare clic suAvanti. Quindi, fare clic su Salva.
Utilizzare un font di Google in una form
- Nel tuo account HubSpot, fai clic su Altro, quindi vai a Marketing > Form. Se Altro non appare nel tuo account, vai direttamente a Marketing > Form.
- Passa il mouse sul nome della form e fai clic su "Azioni" > a "Modifica form" o "Crea una nuova form".
- Nell'editor delle form, fare clic sulla scheda di anteprima " & e dello stile ".
- Nel menu laterale a sinistra, clicca sullasezione "Stile".
- Nellasezione "Testo", fai clic sul menu a tendina "Famiglia di caratteri " e seleziona uncarattere Google Font.
- In alto a destra, clicca su"Aggiorna" o"Pubblica " per rendere visibili le modifiche.
Utilizzare un font di Google in un modulo personalizzato
Nota bene: i Google Fonts non sono disponibili per i moduli personalizzati utilizzati nei modelli di email.
- Nel tuo account HubSpot, fai clic su Altro, quindi vai a Contenuti > Design Manager. Se Altro non compare nel tuo account, vai direttamente a Contenuti > Design Manager.
- Nel Finder, fai clic sul nome di un modulo personalizzato. Scopri di più su come creare un modulo personalizzato.
- Nell'ispettore, fare clic sul menu a discesa "Aggiungi campo" nellasezione "Campi" e selezionare "Carattere". Scopri di più su come utilizzare i campi carattere.
- In alto a destra, clicca su “Pubblica modifiche” perrendere visibili le modifiche apportate.
- Vai al tuo contenuto:
- Pagine del sito web: Nel tuo account HubSpot, fai clic su Altro, quindi vai a Contenuti > Pagine del sito web. Se Altro non compare nel tuo account, vai direttamente a Contenuti > Pagine del sito web.
- Landing Page: Nel tuo account HubSpot, fai clic su Altro, quindi vai a Contenuti > Landing page. Se Altro non appare nel tuo account, vai direttamente a Contenuti > Landing page.
- Blog: Nel tuo account HubSpot, fai clic su Altro, quindi vai a Contenuti > Blog. Se Altro non appare nel tuo account, vai direttamente a Contenuti > Blog.
- Fai clic sul nome del contenuto utilizzando il modulo personalizzato.
- Nell'editor dei contenuti, fare clic sulmodulo personalizzato.
- Nell'editor della barra laterale, fai clic sul menua tendina del campo "Font" e seleziona unfont di Google.
Utilizza caratteri personalizzati
In alternativa all'uso dei font web standard o di una libreria di font comeGoogle Fonts, è possibile caricare i file dei font per poi utilizzarli nei temi o farvi riferimento nei fogli di stile.
Utilizzare caratteri personalizzati nei temi
Nell'editor del tema, carica un font personalizzato, quindi utilizzalo nelle pagine e nei post. I file dei caratteri sono supportati nei seguenti formati: TTF, OTF, WOFF.
Carica font personalizzati per pagine o post
Una volta caricati i font personalizzati, questi saranno disponibili per le pagine, i post o gli articoli della knowledge base.
-
Vai al tuo contenuto:
- Pagine del sito web: Nel tuo account HubSpot, fai clic su Altro, quindi vai a Contenuti > Pagine del sito web. Se Altro non compare nel tuo account, vai direttamente a Contenuti > Pagine del sito web.
- Landing Page: Nel tuo account HubSpot, fai clic su Altro, quindi vai a Contenuti > Landing page. Se Altro non appare nel tuo account, vai direttamente a Contenuti > Landing page.
- Blog: Nel tuo account HubSpot, fai clic su Altro, quindi vai a Contenuti > Blog. Se Altro non appare nel tuo account, vai direttamente a Contenuti > Blog.
- Clicca sul nome del tuo contenuto.
- Nell'editor dei contenuti, fare clic sulmenu Modificae selezionareTema: [Nome del tema].
- Nel menu laterale a sinistra, clicca su uno qualsiasidei menu a tendina relativi ai caratteri e seleziona“Gestisci i caratteri del brand”.
- Segui i passaggi descritti in questo articolo della Knowledge base per aggiungere o modificare i tuoi font.
Carica font personalizzati per gli articoli della knowledge base
Una volta caricati i font personalizzati, questi saranno disponibili per le pagine, i post o gli articoli della knowledge base.
- Nel tuo account HubSpot, fai clic su Altro, quindi vai a Servizio > Knowledge Base. Se Altro non appare nel tuo account, vai direttamente a Servizio > Knowledge Base.
- In alto a destra, clicca su "Personalizza modello".
- Nella barra laterale sinistra, fai clic sulla scheda " Design" .
- Nella barra laterale sinistra, fai clic su " Stili di carattere".
- Fai clic suun qualsiasimenu a tendina dei caratteri e seleziona“Gestisci i caratteri del brand”.
- Segui i passaggi descritti in questo articolo della Knowledge base per aggiungere o modificare i tuoi font.
Modifica dei caratteri personalizzati
Dopo aver caricato un font personalizzato nell'editor del tema, puoi caricare altri font, personalizzare quelli esistenti con stili aggiuntivi oppure eliminarli.
Utilizzare caratteri personalizzati nei fogli di stile
In alternativa all'uso dei font web standard o di una libreria di font comeGoogle Fonts, puoi ospitare i file dei font nello strumento "File", per poi farvi riferimento nel tuo foglio di stile.
Nota bene:i caratteri personalizzatisono disponibili solo negli account con accesso al Design Manager e devono essere applicati tramite CSS. L'aggiunta di un font personalizzatonon comporterà l'inserimento di tale font nei menu a tendina relativi allo stile nell'editor di contenuti.
Per utilizzare un font nei contenuti, carica i file del font nello strumento "File". Si consiglia di caricare almeno le versioni .woff,.ttf e .eot del font per garantire che questo venga caricato su tutti i browser. È possibile utilizzare la modalità "Expert" dellostrumento di conversione di Font Squirrelper generare ulteriori formati di file.
- Nel tuo account HubSpot, fai clic su Altro, quindi vai a Contenuti > File. Se Altro non appare nel tuo account, vai direttamente a Contenuti > File.
- Fai clic su "Carica file".
- Sul disco rigido del computer, seleziona ifile dei caratteri, quindi fai clic su"Apri".
- Fai clic sul nome di un file di font caricato.
- Nel pannello di destra, clicca su"Copia URL " per copiare l'URL in cui è ospitato il file. Ti servirà l'URL del font per ciascun formato di file.
Utilizzare un font personalizzato in un foglio di stile
Dopo aver aggiunto un font personalizzato allo strumento "File", è possibile farvi riferimento in un foglio di stile. Ogni stile di carattere (corsivo, grassetto, ecc.) richiederà una regola @font-face separata. Scopri di più su come utilizzare i fogli di stile in HubSpot.
- Nel tuo account HubSpot, fai clic su Altro, quindi vai a Contenuti > Design Manager. Se Altro non compare nel tuo account, vai direttamente a Contenuti > Design Manager.
- Nel Finder, apri il foglio di stile utilizzato per i tuoi contenuti.
- Per ogni stile di carattere:
- All'inizio del foglio di stile, incolla il codice seguente:
@font-face {
font-family: 'Your Font Name';
src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}
-
- Sostituisci "Nome del font" con ilnome del font.
- Sostituisci "your_font_file.xxx?" conl'URL riportato nello strumento "File". Ripetere l'operazione per ogni formato di file.
- Crea delle regole CSS utilizzando la proprietà ` font-family ` per applicare il font personalizzato.
- In alto a destra, clicca su "Aggiorna" o"Pubblica " per rendere visibili le modifiche.
Utilizzare un font personalizzato in un'e-mail nell'editor drag-and-drop
I caratteri personalizzati per le e-mail sono supportati in Apple Mail e parzialmente supportati in Samsung Mail. I caratteri personalizzati non sono supportati in Gmail, Outlook né nella maggior parte dei client web per dispositivi mobili. Per garantire un'esperienza coerente ai tuoi lettori, si consiglia di utilizzare i font web predefiniti nelle e-mail.
Se desideri aggiungere un font personalizzato a un'e-mail nell'editor drag-and-drop, puoi farlo dopo aver caricato il font personalizzato nel tuo kit del brand e aver impostato un font di riserva.
- Aggiungi un font personalizzato al tuo kit del brand, quindi seleziona il font di riserva più simile al tuo font personalizzato. Per evitare problemi con i font di riserva:
- Utilizza font di riserva con un'altezza x e uno spessore simili a quelli del tuo font personalizzato.
- Visualizza in anteprima le e-mail di marketing via e-mail su diversi client di posta elettronica per verificare quali caratteri verranno utilizzati.
- Assicurati che tutti gli elementi importanti vengano visualizzati come previsto con i caratteri di riserva.
- Nel tuo account HubSpot, fai clic su Altro, quindi vai a Marketing > E-mail. Se Altro non compare nel tuo account, vai direttamente a Marketing > E-mail.
- Fai clic sulnome diun'e-mail di marketing via e-mail oppure fai clic su "Crea e-mail" per crearne una nuova.
- Per utilizzare un font personalizzato per formattare diversi tipi di testo, come paragrafi o titoli:
- Nell'editor delle e-mail, clicca sull'icona del modellonella barra laterale sinistra.
- Per impostare un carattere, nella sezione "Stili di testo", fare clic sulmenu a tendina eselezionare uncarattere nellasezione "Caratteri personalizzati ".
- Per utilizzare un font personalizzato in un modulo di testo formattato:
- Nell'editor delle e-mail, seleziona il testo in un modulo di testo formattato.
- Nell'editor di testo formattato, fai clic sulmenu a tendina dei caratteri, passa il mouse su "Caratteri personalizzati", poi su un carattere personalizzato e seleziona lospessore del carattere.
- Usa lo strumento di composizione per scrivere il testo dell'e-mail, quindi visualizzane l'anteprima su diversi client di posta.
- Completa e invia l'e-mail.
Utilizzare un font personalizzato in un modello di email creato su misura
I caratteri personalizzati sono supportati in Apple Mail e parzialmente supportati in Samsung Mail. I caratteri personalizzati non sono supportati in Gmail, Outlook né nella maggior parte dei client web per dispositivi mobili. Per garantire un'esperienza coerente ai tuoi lettori, si consiglia di utilizzare i font web predefiniti nelle e-mail.
Se desideri aggiungere un font personalizzato a un modello di email creato su misura, puoi farlo dopo aver aggiunto il font personalizzato allo strumento “File”.
- Nel tuo account HubSpot, fai clic su Altro, quindi vai a Contenuti > Design Manager. Se Altro non compare nel tuo account, vai direttamente a Contenuti > Design Manager.
- Nel Finder, fai clic sul nome del tuo modello di email personalizzato.
- Per ogni stile di carattere:
- Nella sezione “
<head>” del modello, incolla questo codice tra i tag<style>....</style>:
- Nella sezione “
@font-face {
font-family: 'Your Font Name';
src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}
-
- Sostituisci "Nome del font" con ilnome del font.
- Sostituisci "your_font_file.xxx?" conl'URLriportato nello strumento "File". Ripetere l'operazione per ogni formato di file.
- Nel codice del corpo dell'e-mail, aggiungi il font personalizzato utilizzando lo stile inline.
- In alto a destra, clicca su "Aggiorna" o"Pubblica " per rendere visibili le modifiche.
Utilizza un font personalizzato in un CTA
Dopo aver aggiunto un font personalizzato al tuo tema, potrai utilizzarlo con i CTA.
- Nel tuo account HubSpot, fai clic su Altro, quindi vai a Marketing > CTA. Se Altro non appare nel tuo account, vai direttamente a Marketing > CTA.
- In alto a sinistra, clicca sul menu a tendina e seleziona i CTA
- Passa il mouse su un CTA, quindi fai clic su Azioni >Modifica.
- Nel pannello di sinistra dell'editor Cta, fare clic sulla scheda "Design" .
- Fai clic sulla sezione "Stili " per espanderla.
- Fai clic sul menu a tendina "Carattere principale " e seleziona il carattere personalizzato.
- Continua a creare il tuo CTA.
Utilizzare un font personalizzato in un CTA (versione precedente)
Come per i CTA, dopo aver caricato un file di font personalizzato, utilizzalo con i CTA precedenti.
- Nel tuo account HubSpot, fai clic su Altro, quindi vai a Marketing > CTA. Se Altro non appare nel tuo account, vai direttamente a Marketing > CTA.
- Passa il mouse su un CTA, quindi fai clic su Azioni >Modifica.
- Nel pannello di destra, fare clic su "Opzioni avanzate".
- Nella casella di testo, incolla questo codice:
font-family: 'Your Font Name'; - Sostituisci "Nome del font" conilnome del font.
- In basso a destra, fare clic suAvanti. Quindi, fare clic su Salva.
Utilizzare un font personalizzato in un modulo personalizzato
Dopo aver aggiunto un font personalizzato allo strumento “File”, utilizzalo nei moduli personalizzati del blog o delle pagine. Scopri come aggiungere un font personalizzato a un modello di email creato su misura.
- Nel tuo account HubSpot, fai clic su Altro, quindi vai a Contenuti > Design Manager. Se Altro non compare nel tuo account, vai direttamente a Contenuti > Design Manager.
- Nel Finder, fare clic sul nome del modulo personalizzato.
- Nell'editor dei moduli, nella sezionemodule.css , incolla il seguente codice:
@font-face {
font-family: 'Your Font Name';
src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}
-
- Sostituisci "Nome del font" con ilnome del font.
- Sostituisci "your_font_file.xxx?" conl'URLriportato nello strumento "File". Ripetere l'operazione per ogni formato di file.
- Crea delle regole CSS utilizzando la proprietà ` font-family ` per applicare il font personalizzato.
- In alto a destra, clicca su " Pubblica modifiche" per rendere effettive le modifiche apportate.