Salta al contenuto
Nota bene: la traduzione in italiano di questo articolo è fornita solo per comodità. La traduzione viene creata automaticamente tramite un software di traduzione e potrebbe non essere stata revisionata. Pertanto, la versione inglese di questo articolo deve essere considerata come la versione di governo contenente le informazioni più recenti. È possibile accedervi qui.
Landing Pages

Utilizzare i font in HubSpot

Ultimo aggiornamento: settembre 12, 2022

Si applica a:

Tutti i prodotti e i piani

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 Google Fonts e i font personalizzati hanno ulteriori restrizioni, descritte di seguito:

Tipo di contenuto Tipo di carattere
Font predefiniti Caratteri di Google

Caratteri personalizzati

Pagina - Modelli di partenza Disponibile nella schedaProgettazione dell'editor di contenuti Non disponibile
Pagina - modelli di tema Disponibile nelle impostazioni del tema e tramite il foglio di stile Disponibile tramite foglio di stile
Pagina - modello codificato Disponibile tramite foglio di stile o modulo personalizzato Disponibile tramite foglio di stile
Blog Disponibile tramite foglio di stile o modulo personalizzato Disponibile tramite foglio di stile
Email Alcuni font predefiniti non sono disponibili nell'editor di posta elettronica drag and drop Disponibile solo per i modelli di email codificati in modo personalizzato; non è supportato dalla maggior parte dei client di posta elettronica. Disponibile solo per i modelli di email codificati in modo personalizzato; non è supportato dalla maggior parte dei client di posta elettronica.
Base di conoscenze Disponibile nella scheda Progettazione dell'editor dei modelli Non disponibile
Modulo personalizzato Disponibile per i moduli personalizzati non utilizzati nelle e-mail Disponibile per i moduli personalizzati non utilizzati nelle e-mail
CTA

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, naviga su Marketing > Sito web > Pagine del sito web.
    • Pagine di atterraggio: Nel tuo account HubSpot, naviga su Marketing > Landing page.
    • Blog: Nel tuo account HubSpot, naviga su Marketing > Sito web > Blog.
    • Base di conoscenza: Nel tuo account HubSpot, naviga su Service > Knowledge Base.
    • Email: Nel tuo account HubSpot, naviga su Marketing > E-mail.
  • Passare il mouse sul contenuto e fare clic su Modifica.
  • 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*

    • Ariale

    • Libro Antiqua*

    • Corriere Nuovo

    • Georgia

    • Helvetica

    • Impatto*

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

Utilizzate i font di Google

I font di Google sono disponibili 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. Per utilizzare un font Google in altre pagine, è necessario copiare il codice di importazione del font, incollarlo nel foglio di stile della pagina e applicare il font con le regole CSS.

Per saperne di più su come gli sviluppatori possono utilizzare i campi font per aggiungere Google Fonts ai temi e ai moduli personalizzati, consultate la documentazione per sviluppatori di HubSpot.

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

  • 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 ogni 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.

copy-google-font

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

  • Copiate il codice @import del font da Google Fonts.
  • Nel tuo account HubSpot, naviga su Marketing > File e Modelli > Strumenti di progettazione.
  • 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.
add-google-fonts-imported-font-to-stylesheet
  • In alto a destra, fare clic su Pubblica o Aggiorna per rendere effettive le modifiche.

Usare un font di Google in un modello di e-mail con codice personalizzato

Sebbene i font di Google siano supportati da Apple Mail e da alcuni altri client di posta elettronica, il supporto è limitato e i client di posta elettronica più diffusi supportano solo i font web predefiniti. Per saperne di più sulla selezione dei font predefiniti utilizzati nell'editor di posta elettronica classico aggiornato .
Per aggiungere un font di Google a un modello di e-mail con codice personalizzato:
  • Copiate il codice @import del font da Google Fonts.
  • Nel tuo account HubSpot, naviga su Marketing > File e Modelli > Strumenti di progettazione.
  • 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 Aggiorna o Pubblica per rendere effettive le modifiche.

Utilizzate un font di Google in una CTA

  • Copiate il codice di Google per impostare le regole CSS per quel font.
  • Nel tuo account HubSpot, naviga su Marketing > Acquisizione lead > CTA.
  • Passare il mouse su una CTA, quindi fare clic sul menu a discesa Azioni e selezionare 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, naviga su Marketing > Acquisizione lead > 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, naviga su Marketing > File e Modelli > Strumenti di progettazione.

click-add-field

  • 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, naviga su Marketing > Sito web > Pagine del sito web.
    • Pagine di atterraggio: Nel tuo account HubSpot, naviga su Marketing > Landing page.
    • Blog: Nel tuo account HubSpot, naviga su Marketing > Sito web > Blog.
  • Passare il mouse sul contenuto del modulo personalizzato e fare clic su Modifica.
  • 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 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. HubSpot 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 di conversione di Font Squirrel per generare altri formati di file.

  • Nel tuo account HubSpot, naviga su Marketing > File e Modelli > 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, naviga su Marketing > File e Modelli > Strumenti di progettazione.
  • Nel Finder, aprire il foglio di stile utilizzato per il contenuto.
  • 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');}
    • Sostituire il nome del font con il nome del carattere.
    • Sostituireyour_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.

sample-custom-font-in-stylesheet

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, utilizzare i font web predefiniti nelle e-mail è consigliato. 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, naviga su Marketing > File e Modelli > Strumenti di progettazione.
  • 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.
    • Sostituireyour_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

Una volta aggiunto un font personalizzato allo strumento file, è possibile utilizzarlo nelle CTA:

  • Nel tuo account HubSpot, naviga su Marketing > Acquisizione lead > CTA.
  • Passare il mouse su una CTA, quindi fare clic sul menu a discesa Azioni e selezionare Modifica.
  • Nel pannello di destra, fare clic su Opzioni avanzate.
  • Nella casella di testo, incollate questo codice:

font-family: 'Nome del font';

  • Sostituire il nome del font con il nome del carattere.
  • In basso a destra, fare clic su Avanti. Quindi fare clic su Salva.

set-custom-font-for-cta

Utilizzare un carattere personalizzato in un modulo personalizzato

Una volta aggiunto un font personalizzato allo strumento file, è possibile utilizzarlo nei moduli personalizzati:

  • Nel tuo account HubSpot, naviga su Marketing > File e Modelli > Strumenti di progettazione.
  • 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.
  • Sostituireyour_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.

custom-module-custom-font

  • In alto a destra, fare clic su Pubblica modifiche per rendere effettive le modifiche.
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.