Utilizzare i font in HubSpot

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

Attenzione: non tutti i tipi di contenuto sono disponibili per tutti gli account. I tipi di contenuto disponibili per gli abbonamenti del vostro account HubSpot si trovano nel Catalogo prodotti e servizi.

Utilizzare i font predefiniti nei moduli di testo ricco

I font 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. Navigare verso il contenuto:

   • Pagine del sito web: Nel tuo account HubSpot, passa a Contenuti > Pagine del sito web.
   • Landing Page: 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. Fare clic sul nome del contenuto.
3. Nell'editor del contenuto, fare clic su un modulo di testo ricco, quindi evidenziare il testo che si desidera modificare.
4. Nella barra degli strumenti del testo ricco, fare clic sul menu a discesa Font e selezionare un font. Nei moduli di testo ricco sono disponibili i seguenti font:

   • Andale Mono*

   • Arial

   • Book Antiqua*

   • Courier New

   • Georgia

   • Helvetica

   • Impact*

   • Lato**
   • Merriweather**

• • Monaco*

• • Simbolo*

  • Tahoma

  • Terminare*

  • Times New Roman

  • Trebuchet MS

  • Verdana

*Non disponibile nell'editor drag-and-drop delle e-mail.

**Disponibile solo come font web nell'editor drag-and-drop e-mail.

Utilizzare i font web

I font Web sono disponibili per impostazione predefinita nell'editor dei contenuti.

Se siete sviluppatori, potete anche utilizzare il campo font per aggiungere font web a temi e moduli personalizzati. Se utilizzati in questo modo, i web font non vengono caricati da un servizio di terze parti; HubSpot li caricherà invece direttamente sul dominio del contenuto.

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

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

1. Andare su fonts.google.com.
2. Nella barra di ricerca, inserire il nome di un font.
3. Fare clic sul nome del font per visualizzare un elenco di stili disponibili per l'importazione.
4. Accanto a ogni stile da importare, fare clic su + Seleziona questo stile
5. Nel pannello di destra, selezionare @import nella sezione Importazione sul web .
6. Copiare il codice del font:
   • Nella sezione Usa sul web , copiare il codice di @import senza il tag <style>.
   • Nel campo Regole CSS per specificare le famiglie , copiare il codice per impostare le regole CSS.

Una volta ottenuto il codice da Google Fonts, è possibile aggiungere il font al contenuto di HubSpot:

• Utilizzare un font di Google in un foglio di stile
• Utilizzare un Google Font in un modello di e-mail con codice personalizzato
• Utilizzare un carattere Google in una CTA (legacy)
• Utilizzare un font Google in un form
• Utilizzare un carattere Google in un modulo personalizzato

Utilizzare un font di 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, aprire il foglio di stile utilizzato per il contenuto.
4. Incollare il codice @import nella riga 1 del foglio di stile.
5. Aggiungete il codice per l'impostazione delle regole CSS ai selettori appropriati del foglio di stile.
6. In alto a destra, fare clic su Pubblica modifiche per rendere effettive le modifiche.

Usare un font di Google in un modello di e-mail 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, aprire il modello di e-mail con codice personalizzato.
4. Nella sezione<head> del modello, incollare il codice @import tra i tag <style>....</style>.
5. Nel codice del corpo dell'e-mail, aggiungere il carattere personalizzato nello stile inline.
6. In alto a destra, fare clic su Pubblica modifiche per rendere effettive le modifiche.

Utilizzare un font di Google in una CTA (legacy)

1. Copiate il codice di Google per impostare le regole CSS per quel font.
2. Nel tuo account HubSpot, passa a Marketing > CTA.
3. Passare il mouse su una CTA, quindi fare clic su Azioni > Modifica.
4. Nel pannello di destra, fare clic su Opzioni avanzate.
5. Nella casella di testo, incollare il codice di Google per l'impostazione delle regole CSS per quel font.
6. In basso a destra, fare clic su Avanti. Quindi, fare clic su Salva.

Utilizzare un font di Google in un form

1. Nel tuo account HubSpot, passa a Marketing > Form.
2. Passare il mouse sul nome del form e fare clic su Azioni > Modifica form o Crea un nuovo form.
3. Nell'editor dei form, fare clic sulla scheda Stile e anteprima.
4. Nel menu della barra laterale sinistra, fare clic sulla sezione Stile .
5. Nella sezione Testo , fare clic sul menu a discesa Famiglia di caratteri e selezionare un font Google.
6. In alto a destra, fare clic su Aggiorna o Pubblica per rendere effettive le modifiche.

Utilizzare un font di Google in un modulo personalizzato

Nota bene: i font di Google non sono disponibili per i moduli personalizzati utilizzati nei modelli e-mail.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. Nel Finder a sinistra, aprire il modulo personalizzato. Per saperne di più sulla creazione di un modulo personalizzato.
3. Nell'ispettore a destra, fare clic sull'elenco a discesa Aggiungi campo nella sezione Campi e selezionare Carattere. Per saperne di più su come lavorare con i campi font.
   
   
4. In alto a destra, fare clic su Pubblica modifiche per rendere effettive le modifiche.

5. Navigare verso il contenuto:

   • Pagine del sito web: Nel tuo account HubSpot, passa a Contenuti > Pagine del sito web.
   • Landing page: Nel tuo account HubSpot, passa a Contenuti > Landing Page.
   • Blog: Nel tuo account HubSpot, passa a Contenuti > Blog.
6. Fare clic sul nome del contenuto che utilizza il modulo personalizzato.
7. Nell'editor dei contenuti, fare clic sul modulo personalizzato.
8. Nell'editor della barra laterale, fare clic sul menu a discesa del campo Font e selezionare un Google Font.

Utilizzare font personalizzati

In alternativa all'uso di font web standard o di una libreria di font come Google Fonts, è possibile caricare file di font e utilizzarli nei temi o farvi riferimento nei fogli di stile.

Utilizzare i font personalizzati nei temi

Nell'editor del tema è possibile caricare un font personalizzato e utilizzarlo nelle pagine e nei post. I file dei font sono supportati nei seguenti formati: TTF, OTF, WOFF.

Caricare 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.

1. Navigare verso il contenuto:

   • Pagine del sito web: Nel tuo account HubSpot, passa a Contenuti > Pagine del sito web.
   • Landing Page: Nel tuo account HubSpot, passa a Contenuti > Landing Page.
   • Blog: Nel tuo account HubSpot, passa a Contenuti > Blog.
2. Fare clic sul nome del contenuto.
3. Nell'editor del contenuto, fare clic sul menu Modifica e selezionare Tema: [Nome del tema].
4. Nel menu della barra laterale sinistra, fare clic sul menu a discesa dei font e selezionare Manage branding fonts.
5. Seguite i passaggi indicati in questo articolo della Knowledge Base per aggiungere o modificare i font.

Caricamento di 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.

1. Nel tuo account HubSpot, passa a Servizio clienti > Knowledge Base.
2. In alto a destra, fare clic sul modello Personalizza.
3. Nella barra laterale sinistra, fare clic sulla scheda Progettazione.
4. Nella barra laterale sinistra, fare clic su Stili di carattere.
5. Fare clic sul menu a discesa dei font e selezionare Manage brand fonts.
6. Seguire i passaggi indicati in questo articolo della Knowledge Base per aggiungere o modificare i font.

Modifica dei font personalizzati

Una volta caricato un carattere personalizzato nell'editor del tema, è possibile caricare altri caratteri, personalizzare quelli esistenti con stili di carattere aggiuntivi o eliminarli.

Utilizzare font personalizzati nei fogli di stile

In alternativa all'uso di font web standard o di una libreria di font come Google Fonts, è possibile ospitare i file dei font nello strumento File e poi farvi riferimento nel foglio di stile.

Nota bene: i font personalizzati sono disponibili solo negli account con accesso al Design Manager e devono essere applicati con i CSS. L'aggiunta di un font personalizzato non aggiungerà il font ai menu a discesa dello stile nell'editor dei contenuti.

Per utilizzare un font nei contenuti, caricare i file del font nello strumento File. Si consiglia di caricare almeno le versioni .woff, .ttf e .eot del font per garantire il caricamento del font su tutti i browser. È possibile utilizzare la modalità Expert dello strumento convertitore di Font Squirrel per generare altri formati di file.

1. Nel tuo account HubSpot, passa a Contenuti > File.
2. Fare clic su Carica file.
3. Sul disco rigido del computer, selezionare i file di font, quindi fare clic su Apri.
4. Fate clic sul nome di un file di font caricato.
5. Nel pannello di destra, fare clic su Copia URL per copiare l'URL in cui è ospitato il file. È necessario l'URL per il font in ogni formato di file.

Utilizzare un font personalizzato in un foglio di stile

Una volta aggiunto un font personalizzato allo strumento File, è possibile fare riferimento ad esso in un foglio di stile. Ogni stile di carattere (corsivo, grassetto, ecc.) richiederà una regola @font-face separata. Per saperne 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, aprire il foglio di stile utilizzato per il contenuto.
3. Per ogni stile di carattere:
   • All'inizio del foglio di stile, incollate 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');}

1. • • Sostituire Your Font Name con il nome del font.
     • Sostituire your_font_file.xxx? con l'URL dello strumento File. Ripetere per ogni formato di file.

4. Creare regole CSS con la proprietà font-family per applicare il carattere personalizzato.
5. In alto a destra, fare clic su Aggiorna o Pubblica per rendere effettive le modifiche.

Utilizzare un font personalizzato in un modello di e-mail con codice personalizzato

I font personalizzati non sono supportati dalla maggior parte dei client e-mail. Per garantire un'esperienza coerente ai lettori, si consiglia di utilizzare i font web predefiniti nelle e-mail. Tuttavia, se si desidera aggiungere un font personalizzato a un modello di e-mail con codice personalizzato, è possibile farlo dopo aver aggiunto il font personalizzato allo strumento File.

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

@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');}

1. • Sostituire Your Font Name con il nome del font.
   • Sostituire your_font_file.xxx? con l'URL dello strumento File. Ripetere per ogni formato di file.

4. Nel codice del corpo dell'e-mail, aggiungere il carattere personalizzato nello stile inline.
5. In alto a destra, fare clic su Aggiorna o Pubblica per rendere effettive le modifiche.

Utilizzare un font personalizzato in una CTA

Dopo aver aggiunto un font personalizzato al tema, è possibile utilizzarlo con le CTA:

1. Nel tuo account HubSpot, passa a Marketing > CTA.
2. In alto a sinistra, fare clic sul menu a discesa e selezionare CTA
3. Passare il mouse su una CTA, quindi fare clic su Azioni > Modifica.
4. Nel pannello sinistro dell'editor di CTA, fare clic sulla scheda Progettazione.
5. Fare clic sulla sezione Stili per espanderla.
6. Fare clic sul menu a discesa Font primario e selezionare il font personalizzato.
7. Continuare a creare la CTA.

Utilizzare un font personalizzato in una CTA (legacy)

Analogamente alle CTA, dopo aver caricato un file di form personalizzato, è possibile utilizzarlo con le CTA tradizionali:

1. Nel tuo account HubSpot, passa a Marketing > CTA.
2. Passare il mouse su una CTA, quindi fare clic su Azioni > Modifica.
3. Nel pannello di destra, fare clic su Opzioni avanzate.
4. Nella casella di testo, incollare questo codice:
   
   font-family: 'Your Font Name';
5. Sostituire il nome del font con il nome del font.
6. In basso a destra, fare clic su Avanti. Quindi, fare clic su Salva.

Utilizzare un carattere personalizzato in un modulo personalizzato

Una volta aggiunto un font personalizzato allo strumento File, è possibile utilizzarlo nei moduli di blog o pagine personalizzate. Scoprite come aggiungere un carattere personalizzato a un modello di e-mail con codice personalizzato.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. NelFinder, aprire il modulo personalizzato.
3. Nella sezione module.css, incollare 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');}

5. Sostituire Your Font Name con il nome del font.
6. Sostituire your_font_file.xxx? con l'URL dello strumento File. Ripetere per ogni formato di file.
7. Creare regole CSS con la proprietà font-family per applicare il font personalizzato.
8. In alto a destra, fare clic su Pubblica modifiche per rendere effettive le modifiche.