Utilizzare i font in HubSpot

I caratteri disponibili per i contenuti in HubSpot dipendono dal tipo di contenuto e dal tipo di carattere. Alcuni caratteri predefiniti sono disponibili in tutti gli editor di contenuti, mentre i caratteri web (come Google Fonts) e i caratteri personalizzati hanno ulteriori restrizioni, descritte di seguito: 

Nota: non tutti i tipi di contenuto sono disponibili in tutti gli account. I tipi di contenuto disponibili per gli abbonamenti nel tuo account HubSpot sono riportati nel Catalogo prodotti e servizi. 

Utilizza i caratteri predefiniti nei moduli di testo formattato

I caratteri predefiniti possono essere utilizzati in tutti i tipi di contenuto e sono progettati per essere caricati sulla maggior parte delle piattaforme e dei dispositivi. 

1. Passa ai tuoi contenuti:

   • Pagine del sito web: Nel tuo account HubSpot, passa a Contenuti > Pagine del sito web.
   • Pagine di destinazione: Nel tuo account HubSpot, passa a Contenuti > Landing Page.
   • Blog: Nel tuo account HubSpot, passa a Contenuti > Blog.
   • E-mail: Nel tuo account HubSpot, vai a Marketing > E-mail.
2. Clicca sul nome del tuo contenuto. 
3. Nell'editor dei contenuti, clicca su unmodulo di testo formattato, quindi evidenzia il testo che desideri modificare. 
4. Nella barra degli strumenti del testo formattato, clicca sul menua tendina Fonte seleziona un font. Nei moduli di testo formattato sono disponibili i seguenti font: 
   • Caratteri del marchio

   • Andale Mono*

   • Arial

   • Book Antiqua*

   • Courier New

   • Georgia

   • Helvetica

   • Impact*

   • Lato**
   • Merriweather**

• • Monaco*

• • Symbol*

  • Tahoma

  • Terminal*

  • Times New Roman

  • Trebuchet MS

  • Verdana

*Non disponibile nell'editor di email drag and drop.

**Disponibile solo come font web nell'editor di email drag and drop.

Utilizza i font web

I font web sono disponibili per impostazione predefinita nell'editor di contenuti.

Se sei uno sviluppatore, puoi anche utilizzare il campo font per aggiungere font web a temi e moduli personalizzati. Quando vengono utilizzati in questi modi, i font web non vengono caricati da un servizio di terze parti; HubSpot li caricherà invece direttamente sul dominio del contenuto.

Nota: i font web non possono essere selezionati nel menu a tendina dei font dell'editor di testo avanzato.

Puoi anche utilizzare servizi di terze parti come Google Fonts copiando il codice di importazione del font, incollandolo nel foglio di stile del contenuto, quindi applicando il font tramite CSS:

1. Vai su fonts.google.com.
2. Nella barra di ricerca, inserisciil nome di un font. 
3. Fai clic sul nome del font per visualizzare un elenco di stili disponibili per l'importazione.
4. Accanto a ciascuno stile che si desidera importare, fare clic su + Seleziona questo stile
5. Nel pannello di destra, seleziona@import nellasezione Usa sul web. 
6. Copia il codice del font: 
   • Nella sezione Usa sul web , copia il codice @import senza il tag <style>.
   • Nelcampo Regole CSS per specificare le famiglie , copia ilcodiceper impostare le regole CSS. 

Una volta ottenuto il codice da Google Fonts, puoi aggiungere il font ai tuoi contenuti HubSpot: 

• Utilizza un font Google in un foglio di stile
• Utilizza un font Google in un modello di email con codice personalizzato
• Utilizza un font Google in un CTA (legacy)
• Utilizza un font Google in un modulo
• Utilizza un font Google in un modulo personalizzato

Utilizzare un font Google in un foglio di stile

1. Copiare il codice @import del font da Google Fonts.
2. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
3. Nel Finder, apri il foglio di stile utilizzato per i tuoi contenuti.
4. Incolla il codice @import nella riga 1 del foglio di stile. 
5. Aggiungi il codice per impostare le regole CSS ai selettori appropriati nel foglio di stile.
6. In alto a destra, fai clic suPubblica modifiche per rendere effettive le modifiche. 

Utilizza un font Google in un modello di email con codice personalizzato

1. copiare il codice @import del font da Google Fonts.
2. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
3. Nel Finder, apri il modello di email con codice personalizzato.
4. Nella sezione<head> del modello, incolla il codice @import tra i tag <style>....</style>. 
5. Nel codice del corpo dell'e-mail, aggiungi il font personalizzato nello stile inline. 
6. In alto a destra, clicca su Pubblica modificheper rendere effettive le modifiche. 

Utilizza un font Google in un CTA (legacy)

1. Copia il codice di Google per impostare le regole CSS per quel font.
2. Nel tuo account HubSpot, passa a Marketing > CTA.
3. Passa con il mouse su un CTA, quindi fai clic su Azioni > Modifica. 
4. Nel pannello di destra, clicca suOpzioni avanzate. 
5. Nella casella di testo, incolla il codice di Google per impostare le regole CSS per quel font. 
6. In basso a destra, clicca suAvanti. Quindi, clicca su Salva.

Utilizza un font Google in un modulo

1. Nel tuo account HubSpot, passa a Marketing > Form.
2. Passa con il mouse sul nome del modulo e fai clic su Azioni > Modifica modulo o Crea un nuovo modulo.
3. Nell'editor del modulo, fai clic sulla scheda Stile e anteprima. 
4. Nel menu della barra laterale sinistra, clicca sullasezione Stile.
5. Nellasezione Testo, clicca sul menu a tendinaFamiglia di caratteri e seleziona unfont Google. 
6. In alto a destra, clicca suAggiorna oPubblica per rendere effettive le modifiche. 

Utilizza un font Google in un modulo personalizzato

Nota: i font Google non sono disponibili per i moduli personalizzati utilizzati nei modelli di email.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel finder a sinistra, apri il modulo personalizzato. Scopri di più sulla creazione di un modulo personalizzato.
3. Nell'inspector a destra, clicca sulmenu a tendinaAggiungi camponellasezioneCampie selezionaFont. Scopri di più sull'utilizzo dei campi font.
   
   
   
4. In alto a destra, clicca su Pubblica modifiche perrendere effettive le modifiche. 

5. Passa al tuo contenuto:

   • Pagine del sito web: Nel tuo account HubSpot, passa a Contenuti > Pagine del sito web.
   • Pagine di destinazione: Nel tuo account HubSpot, passa a Contenuti > Landing Page.
   • Blog: Nel tuo account HubSpot, passa a Contenuti > Blog.
6. Fai clic sul nome del contenuto utilizzando il modulo personalizzato. 
7. Nell'editor dei contenuti, clicca sulmodulo personalizzato. 
8. Nell'editor della barra laterale, clicca sul menua tendina del campo Fonte seleziona unfont Google. 

Utilizza font personalizzati

In alternativa all'utilizzo di font web standard o di una libreria di font comeGoogle Fonts, puoi caricare file di font, quindi utilizzarli nei temi o fare riferimento ad essi nei fogli di stile.

Utilizza font personalizzati nei temi

Nell'editor dei temi, puoi caricare un font personalizzato, quindi utilizzarlo nelle pagine e nei post. I file di font sono supportati nei seguenti formati: TTF, OTF, WOFF.

Carica font personalizzati per pagine o post

Una volta caricati i font personalizzati, saranno disponibili per pagine, post o articoli della knowledge base.

1. Passa al tuo contenuto:

   • Pagine del sito web: Nel tuo account HubSpot, passa a Contenuti > Pagine del sito web.
   • Pagine di destinazione: Nel tuo account HubSpot, passa a Contenuti > Landing Page.
   • Blog: Nel tuo account HubSpot, passa a Contenuti > Blog.
2. Fai clic sul nome del tuo contenuto. 
3. Nell'editor dei contenuti, clicca sulmenu Modificae selezionaTema: [Nome del tema].
4. Nel menu della barra laterale sinistra, clicca su qualsiasimenu a tendina dei caratteri e selezionaGestisci caratteri del marchio.
5. 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 pagine, post o articoli della Knowledge Base.

1. Nel tuo account HubSpot, passa a Servizio clienti > Knowledge Base.
2. In alto a destra, clicca suPersonalizza modello.
3. Nella barra laterale sinistra, clicca sulla scheda Design.
4. Nella barra laterale sinistra, clicca su Stili dei caratteri.
5. Fai clic su qualsiasimenu a discesa dei font e selezionaGestisci font del marchio.
6. Segui i passaggi descritti in questo articolo della Knowledge Base per aggiungere o modificare i tuoi font.

Modifica dei font personalizzati

Dopo aver caricato un font personalizzato nell'editor dei temi, puoi caricare font aggiuntivi, personalizzare i font esistenti con stili di font aggiuntivi o eliminare i font.

Utilizzo dei font personalizzati nei fogli di stile

In alternativa all'utilizzo dei font web standard o di una libreria di font comeGoogle Fonts, puoi ospitare i file dei font nello strumento file, quindi fare riferimento ad essi nel tuo foglio di stile. 

Nota:i fontpersonalizzatisono disponibili solo negli account con accesso al design manager e devono essere applicati con CSS. L'aggiunta di un font personalizzatonon aggiungerà il font ai menu a tendina di stile nell'editor di contenuti. 

Per utilizzare un font nel contenuto, carica i file del font nello strumento file. Si consiglia di caricare almeno le versioni .woff, .ttf e .eot del font per garantire che il font venga caricato su tutti i browser. È possibile utilizzare la modalità Esperto dellostrumento di conversione di Font Squirrelper generare formati di file aggiuntivi.

1. Nel tuo account HubSpot, vai a Contenuti > File. Se utilizzi gli strumenti gratuiti di HubSpot, vai a Marketing > E-mail. In alto a destra, fai clic su Strumenti e-mail e seleziona File.
2. Fare clic suCarica file. 
3. Sul disco rigido del computer, selezionare ifile dei font, quindi fare clicsu Apri. 
4. Fai clic sul nome di un file di font caricato. 
5. Nel pannello di destra, cliccasu Copia URL per copiare l'URL in cui è ospitato il file. Avrai bisogno dell'URL per il font in ogni formato di file. 

Utilizza un font personalizzato in un foglio di stile

Dopo aver aggiunto un font personalizzato allo strumento file, puoi fare riferimento ad esso in un foglio di stile. Ogni stile di font (corsivo, grassetto, ecc.) richiederà una regola @font-face separata. Scopri di più su come lavorare con i fogli di stile in HubSpot. 

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, apri il foglio di stile utilizzato per i tuoi contenuti.
3. Per ogni stile di font: 
   • Nella parte superiore del foglio di stile, incolla il seguente codice: 

@font-face { font-family: 'Nome del tuo font'; src: url('il_tuo_file_font.eot?') format('eot'), url('il_tuo_file_font.woff') format('woff'), url('il_tuo_file_font.ttf') format('truetype');}

1. • • Sostituisci Il nome del tuo font con ilnome del font.
     • Sostituisciil tuo_file_font.xxx? conl'URL dello strumento file. Ripeti l'operazione per ogni formato di file.

4. Crea regole CSS con la proprietà font-family per applicare il font personalizzato. 
5. In alto a destra, clicca su Aggiorna oPubblica per rendere effettive le modifiche. 

Utilizza un font personalizzato in un modello di email con codice personalizzato

I font personalizzati non sono supportati nella maggior parte dei client di posta elettronica più diffusi. Per garantire un'esperienza coerente ai tuoi lettori, ti consigliamo di utilizzare i font web predefiniti nelle email. Tuttavia, se desideri aggiungere un font personalizzato a un modello di email con codice personalizzato, puoi farlo dopo aver aggiunto il font personalizzato allo strumento file.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder, apri il modello di email con codice personalizzato.
3. Per ogni stile di carattere:
   • Nella sezione <head> del modello, incolla questo codice tra i tag <style>....</style>: 

@font-face { font-family: 'Nome del tuo font'; src: url('il_tuo_file_font.eot?') format('eot'), url('il_tuo_file_font.woff') format('woff'), url('il_tuo_file_font.ttf') format('truetype');}

1. • Sostituisci Il nome del tuo font con ilnome del font.
   • Sostituisciil tuo_file_font.xxx? conl'URLdello strumento file. Ripeti l'operazione per ogni formato di file. 

4. Nel codice del corpo dell'e-mail, aggiungi il font personalizzato nello stile inline. 
5. In alto a destra, clicca su Aggiorna oPubblica per rendere effettive le modifiche. 

Utilizza un font personalizzato in un CTA

Dopo aver aggiunto un font personalizzato al tuo tema, puoi utilizzarlo con i CTA:

1. Nel tuo account HubSpot, passa a Marketing > CTA.
2. In alto a sinistra, clicca sul menu a tendina e seleziona CTA
3. Passa con il mouse su un CTA, quindi fai clic su Azioni > Modifica. 
4. Nel pannello sinistro dell'editor CTA, clicca sulla scheda Design. 
5. Fai clic sulla sezione Stili per espanderla.
6. Fai clic sul menu a discesa Carattere principale e seleziona il carattere personalizzato. 
7. Continua a creare il tuo CTA. 

Utilizzare un font personalizzato in un CTA (legacy)

Analogamente ai CTA, dopo aver caricato un file di modulo personalizzato, è possibile utilizzarlo con i CTA legacy:

1. Nel tuo account HubSpot, passa a Marketing > CTA.
2. Passa con il mouse su un CTA, quindi fai clic su Azioni > Modifica. 
3. Nel pannello di destra, fai clic suOpzioni avanzate. 
4. Nella casella di testo, incollare questo codice:
   
   font-family: 'Nome del tuo font';
5. Sostituisci Nome del tuo fontcon ilnome del font.
6. In basso a destra, clicca suAvanti. Quindi, clicca su Salva. 

Utilizza un font personalizzato in un modulo personalizzato

Dopo aver aggiunto un font personalizzato allo strumento file, puoi utilizzarlo nei moduli personalizzati del blog o della pagina. Scopri come aggiungere un font personalizzato a un modello di email con codice personalizzato. 

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. NelFinder, apri il modulo personalizzato.
3. Nella sezione module.css, incolla il seguente codice: 

@font-face { font-family: 'Nome del tuo font'; src: url('il_tuo_file_font.eot?') format('eot'), url('il_tuo_file_font.woff') format('woff'), url('il_tuo_file_font.ttf') format('truetype');}

5. Sostituisci Il nome del tuo font con ilnome del font.
6. Sostituisciil tuo_file_font.xxx? conl'URLdello strumento file. Ripeti l'operazione per ogni formato di file.
7. Crea regole CSS con la proprietà font-family per applicare il font personalizzato. 
8. In alto a destra, clicca su Pubblica modificheper rendere effettive le modifiche.