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

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

• Navigare verso il proprio contenuto:

  • Pagine del sito web: Nel tuo account HubSpot, passa a Contenuti > Pagine del sito web.
  • Pagine di atterraggio: Nel tuo account HubSpot, passa a Contenuti > Landing Page.
  • Blog: Nel tuo account HubSpot, passa a Contenuti > Blog.
  • Base di conoscenza: Nel tuo account HubSpot, passa a Contenuti > Knowledge Base.
  • Email: Nel tuo account HubSpot, passa a Marketing > E-mail di marketing.
• Fare clic sul nome del contenuto.
• Nell'editor dei contenuti, fare clic su un modulo di testo ricco, quindi evidenziare il testo che si desidera modificare.
• 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

  • Terminale*

  • Times New Roman

  • Trebuchet MS

  • Verdana

*Non disponibile nell'editor di e-mail con trascinamento.

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

Utilizzare i font web

I font Web sono disponibili per impostazione predefinita nell'editor dei contenuti per le pagine che utilizzano modelli e temi di partenza, nonché per gli articoli della knowledge base e i moduli personalizzati.

Se siete sviluppatori, potete anche utilizzare il campo font per aggiungere font web a temi e moduli personalizzati. Quando vengono 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.

È anche possibile utilizzare 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 i CSS:

• Andate su fonts.google.com.
• Nella barra di ricerca, inserite il nome di un font.
• Fare clic sul nome del font per visualizzare un elenco di stili disponibili per l'importazione.
• Accanto a ciascuno stile che si desidera importare, fare clic su + Seleziona questo stile
• Nel pannello di destra, selezionare @import nella sezione Usa sul web .
• Copiare il codice del font:
  • Nella sezione Utilizzo sul web , copiare il codice @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 ai contenuti di HubSpot:

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

Utilizzare un font di Google in un foglio di stile

• Copiate il codice @import del font da Google Fonts.
• Nel tuo account HubSpot, passa a Contenuti > Design Manager.
• Nel Finder, aprire il foglio di stile utilizzato per il contenuto.
• Incollare il codice @import nella riga 1 del foglio di stile.
• Aggiungere il codice per l'impostazione delle regole CSS ai selettori appropriati nel foglio di stile.
• 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

• Copiate il codice @import del font da Google Fonts.
• Nel tuo account HubSpot, passa a Contenuti > Design Manager.
• Nel Finder, aprite il modello di e-mail codificato personalizzato.
• Nella sezione<head> del modello, incollare il codice @import tra i tag <style>....</style>.
• Nel codice del corpo dell'e-mail, aggiungere il carattere personalizzato nello stile inline.
• In alto a destra, fare clic su Pubblica modifiche per rendere effettive le modifiche.

Utilizzare un font di Google in una CTA (legacy)

• Copiate il codice di Google per impostare le regole CSS per quel font.
• Nel tuo account HubSpot, passa a Marketing > CTA.
• Passare il mouse su una CTA, quindi fare clic su Azioni > Modifica.
• Nel pannello di destra, fare clic su Opzioni avanzate.
• Nella casella di testo, incollate il codice di Google per impostare le regole CSS per quel font.
• In basso a destra, fare clic su Avanti. Quindi, fare clic su Salva.

Utilizzare un font di Google in un modulo

• Nel tuo account HubSpot, passa a Marketing > Form.
• Passare il mouse sul nome del modulo e fare clic su Azioni > Modifica modulo o Crea un nuovo modulo.
• Nell'editor dei moduli, fare clic sulla scheda Stile e anteprima.
• Nel menu della barra laterale sinistra, fare clic sulla sezione Stile .
• Nella sezione Testo , fare clic sul menu a discesa Famiglia di caratteri e selezionare un carattere Google.
• 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 di e-mail.

• Nel tuo account HubSpot, passa a Contenuti > Design Manager.

• Nel Finder a sinistra, aprire il modulo personalizzato. Per saperne di più sulla creazione di un modulo personalizzato.
• 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.

• In alto a destra, fare clic su Pubblica modifiche per rendere effettive le modifiche.

• Navigare verso il proprio contenuto:

  • Pagine del sito web: Nel tuo account HubSpot, passa a Contenuti > Pagine del sito web.
  • Pagine di atterraggio: Nel tuo account HubSpot, passa a Contenuti > Landing Page.
  • Blog: Nel tuo account HubSpot, passa a Contenuti > Blog.
• Fare clic sul nome del contenuto che utilizza il modulo personalizzato.
• Nell'editor dei contenuti, fare clic sul modulo personalizzato.
• 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, quindi 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 di font sono supportati nei seguenti formati: TTF, OTF, WOFF.

Caricare font personalizzati

• Navigare verso il proprio contenuto:

  • Pagine del sito web: Nel tuo account HubSpot, passa a Contenuti > Pagine del sito web.
  • Pagine di atterraggio: Nel tuo account HubSpot, passa a Contenuti > Landing Page.
  • Blog: Nel tuo account HubSpot, passa a Contenuti > Blog.
• Fare clic sul nome del contenuto.
• Nell'editor dei contenuti, fare clic sul menu Modifica e selezionare Tema: [Nome del tema].
• Nel menu della barra laterale sinistra, fare clic sul menu a discesa di un font e selezionare Carica un font personalizzato.
• Nel pannello di destra, inserire un'etichetta per il font nel campo Nome font .
• Fare clic su Scegli file di font e selezionare uno o più file di font, quindi fare clic su Avanti.

• Fare clic sul menu a discesa Stile font 1 e selezionare lo stile utilizzato dal file di font. Ogni stile deve utilizzare un file di font separato.
• Per aggiungere altri stili di font, fare clic su + Aggiungi un altro stile di font, quindi aggiungere gli stili di font. Ogni file di font caricato deve avere almeno uno stile associato.
• Una volta aggiunti tutti gli stili di carattere applicabili, fare clic su Fine.

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.

• Navigare verso il proprio contenuto:

  • Pagine del sito web: Nel tuo account HubSpot, passa a Contenuti > Pagine del sito web.
  • Pagine di atterraggio: Nel tuo account HubSpot, passa a Contenuti > Landing Page.
  • Blog: Nel tuo account HubSpot, passa a Contenuti > Blog.
• Fare clic sul nome del contenuto.
• Nell'editor dei contenuti, fare clic sul menu Modifica e selezionare Tema: [Nome del tema].
• Nel menu della barra laterale sinistra, fare clic per espandere la sezione Caratteri .
• Fare clic sul menu a discesa dei font di e selezionareGestisci font personalizzati.
• Per aggiungere un nuovo font, fare clic su Aggiungi un font personalizzato nella finestra di dialogo.
• Per modificare un carattere:
  • Nella finestra di dialogo, fare clic sul menu a discesa Azioni accanto al font e selezionare Modifica.
  • Per cambiare il nome del font, fare clic su Modifica accanto al nome del font e inserire un nuovo nome.
  • Per aggiungere altri stili di font, fare clic su Aggiungi un altro stile di font, quindi fare clic sul menu a discesa Stile di font e selezionare uno stile. Fare clic su Carica, quindi caricare un file di font.
  • Per eliminare uno stile di carattere, fare clic sull'icona dieliminazione deletededel   accanto allo stile di carattere. Non è possibile eliminare uno stile di carattere se non ci sono altri stili di carattere nell'elenco.
  • Fare clic su Salva.
• Per eliminare un font, fare clic sul menu a discesa Azioni nella finestra di dialogo e selezionare Elimina.

Nota bene: l'eliminazione di un font lo rimuove da tutti i menu a discesa, ma i file dei font rimangono nello strumento File finché non vengono eliminati.

• Una volta terminata la modifica dei font, fare clic su Fine.

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

• Nel tuo account HubSpot, passa a Libreria > File.
• Fare clic su Carica file.
• Sul disco rigido del computer, selezionare i file di font, quindi fare clic su Apri.
• Fare clic sul nome di un file di font caricato.
• 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.

• Nel tuo account HubSpot, passa a Contenuti > Design Manager.
• Nel Finder, aprire il foglio di stile utilizzato per il contenuto.
• Per ogni stile di carattere:
  • All'inizio del foglio di stile, 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');}

• • Sostituire il nome del font con il nome del carattere.
  • Sostituire your_font_file.xxx? con l'URL dello strumento file. Ripetere l'operazione per ogni formato di file.
• Creare regole CSS con la proprietà font-family per applicare il carattere personalizzato.
• 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 di posta elettronica. Per garantire un'esperienza coerente ai lettori, si consiglia di utilizzare i font web predefiniti nelle e-mail. Tuttavia, se desiderate aggiungere un font personalizzato a un modello di email codificato, potete farlo dopo aver aggiunto il font personalizzato allo strumento file.

• Nel tuo account HubSpot, passa a Contenuti > Design Manager.
• Nel Finder, aprite il modello di e-mail codificato personalizzato.
• 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');}

• • Sostituire il nome del font con il nome del carattere.
  • Sostituire your_font_file.xxx? con l'URL dello strumento file. Ripetere l'operazione per ogni formato di file.
• Nel codice del corpo dell'e-mail, aggiungere il carattere personalizzato nello stile inline.
• 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:

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

Utilizzare un font personalizzato in una CTA (legacy)

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

• Nel tuo account HubSpot, passa a Marketing > CTA.
• Passare il mouse su una CTA, quindi fare clic su Azioni > Modifica.
• Nel pannello di destra, fare clic su Opzioni avanzate.
• Nella casella di testo, incollate questo codice:

font-family: 'Your Font Name';

• Sostituire il nome del font con il nome del carattere.
• 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 personalizzati di blog o pagine. Scoprite come aggiungere un font personalizzato a un modello di e-mail con codice personalizzato.

• Nel tuo account HubSpot, passa a Contenuti > Design Manager.
• Nel Finder, aprire il modulo personalizzato.
• 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');}

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