Salta al contenuto
Nota bene: la traduzione in olandese 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 27, 2021

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 di default 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
Caratteri predefiniti Google Fonts

Font personalizzati

Pagina - modelli di partenza Disponibile nella schedaDesign dell'editor di contenuti Non disponibile
Pagina - modelli di tema Disponibile nelle impostazioni del tema e tramite 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 email drag and drop Disponibile solo per i modelli di posta elettronica personalizzati; non supportato nella maggior parte dei client di posta elettronica Disponibile solo per i modelli di posta elettronica personalizzati; non supportato nella maggior parte dei client di posta elettronica
Base di conoscenza Disponibile nellascheda Designdell'editor di 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

Utilizzare i font predefiniti

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.

  • Naviga verso il tuo 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 Servizi > Knowledge Base.
    • Email: Nel tuo account HubSpot, naviga su Marketing > E-mail.
  • Passa sopra il tuo contenuto e clicca suModifica.
  • Nell'editor di contenuti, fai clic su unmodulo di testo ricco, quindi evidenzia il testo che vuoi modificare.
  • Nella barra degli strumenti Rich Text, clicca sul menu a discesaFonte seleziona un font. I seguenti font sono disponibili nei moduli di testo ricco:
    • Andale Mono*

    • Arial

    • Libro Antiqua*

    • Corriere Nuovo

    • Georgia

    • Helvetica

    • Impatto*

    • Lato**
    • Merriweather**
    • Monaco*
    • Simbolo*

    • Tahoma

    • Terminale*

    • Times New Roman

    • Trabucco MS

    • Verdana

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

**Solo disponibile come web font nell'editor di email drag and drop.

Usa i font di Google

I font di Google sono disponibili nell'editor dei contenuti per le pagine che utilizzano modelli e temi di partenza, così come articoli della base di conoscenza e moduli personalizzati. Per utilizzare un font di Google in altre pagine, è necessario copiare il codice di importazione del font, incollarlo nel foglio di stile della pagina, quindi applicare il font con le regole CSS.

Scopri di più su come gli sviluppatori possono utilizzare i campi di caratteri per aggiungere Google Fonts ai temi e ai moduli personalizzati nella documentazione per gli sviluppatori di HubSpot.

Nota: Google Fonts non può essere selezionato nel menu a discesa dei caratteri dell'editor di testo ricco.

  • Naviga su fonts.google.com.
  • Nella barra di ricerca, inserisci ilnome di unfont.
  • Clicca sul nome del font per visualizzare un elenco di stili disponibili per l'importazione.
  • Accanto a ogni stile che vuoi importare, clicca su + Seleziona questo stile
  • Nel pannello di destra, seleziona@importnella sezioneUse on the web.
  • Copia il codice del font:
    • Nella sezione Use on the web , copia il codice @import senza il tag <style>.
    • Nel campoRegole CSS per specificare le famiglie , copia il codice per impostare le regole CSS.

copy-google-font

Una volta che hai il codice di Google Fonts, puoi aggiungere il font al tuo contenuto HubSpot:

Usare un Google Font in un foglio di stile

  • Copia il codice @import del font da Google Fonts.
  • Nel tuo account HubSpot, naviga su Marketing > File e Modelli > Strumenti di progettazione.
  • Nel cercatore, apri il foglio di stile usato per il tuo contenuto.
  • Incolla il codice @import nella linea 1 del foglio di stile.
  • Aggiungete il codice per impostare le regole CSS ai selettori appropriati nel foglio di stile.
add-google-fonts-imported-font-to-stylesheet
  • In alto a destra, clicca suPubblica oAggiornaper rendere attive le tue modifiche.

Usare un Google Font in un modello di email personalizzato e codificato

Sebbene Google Fonts sia supportato da Apple Mail e da alcuni altri client di posta elettronica, il supporto generale è limitato e la maggior parte dei client di posta elettronica popolari supporta solo i web font predefiniti. Scopri di più su come selezionare i font predefiniti utilizzati nell'editor di posta elettronica classico aggiornato.
Per aggiungere un Google Font a un modello di email personalizzato e codificato:
  • Copia il codice @import del font da Google Fonts.
  • Nel tuo account HubSpot, naviga su Marketing > File e Modelli > Strumenti di progettazione.
  • Nel finder, apri il modello di email codificato personalizzato.
  • Nella sezione<head> del modello, incollate il codice @import tra i tag <style>....</style>.
  • Nel codice del corpo dell'e-mail, aggiungi il font personalizzato nello stile inline.
  • In alto a destra, clicca su UpdateoPublish per rendere attive le tue modifiche.

Usa un font di Google in un CTA

  • Copia il codice di Google per impostare le regole CSS per quel font.
  • Nel tuo account HubSpot, naviga su Marketing > Acquisizione lead > CTA.
  • Passa sopra un CTA, poi clicca sul menu a discesa Azioni e selezionaModifica.
  • Nel pannello di destra, clicca suOpzioni avanzate.
  • Nella casella di testo, incolla il codice di Google per impostare le regole CSS per quel font.
  • In basso a destra, clicca suNext. Poi clicca su Salva.

Utilizzare un Google Font in un modulo personalizzato

Nota: Google Fonts non è disponibile 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, fai clic su Publish changes (Pubblica modifiche) per rendere attive le tue modifiche.
  • Naviga verso il tuo 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.
  • Passa sopra il contenuto che utilizza il modulo personalizzato e clicca suModifica.
  • Nell'editor di contenuti, clicca sulmodulo personalizzato.
  • Nell'editor della barra laterale, clicca sul menu a tendina delcampo Fonte seleziona unfont Google.

Usare font personalizzati

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

Si prega di notare:i font personalizzati devono essere applicati tramite CSS. L'aggiunta di un font personalizzatonon aggiungerà il font allo stile dei menu a discesa nell'editor dei contenuti.

Per utilizzare un font nel contenuto, carica i file del font nello strumento dei file. HubSpot raccomanda di caricare un minimo di versioni.woff, .ttf, & .eot del font per assicurarsi che il font venga caricato su tutti i browser

s. È possibile utilizzare la modalità Expert sullostrumento di conversione di Font Squirrel per generare ulteriori formati di file.

  • Nel tuo account HubSpot, naviga su Marketing > File e Modelli > File.
  • Fare clic suCarica i file.
  • Sul disco rigido del tuo computer, seleziona ifile dei font, poi clicca suOpen.
  • Clicca sul nome di un file di font caricato.
  • Nel pannello di destra, clicca suCopy URL per copiare l'URL dove il file è ospitato. Avrai bisogno dell'URL per il font in ogni formato di file.

Utilizzare un font personalizzato in un foglio di stile

Una volta che hai aggiunto un font personalizzato allo strumento file, puoi fare riferimento ad esso in un foglio di stile. Ogni stile di carattere (corsivo, grassetto, ecc.) richiederà una regola @font-face separata. Scopri 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 cercatore, apri il foglio di stile usato per il tuo 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');}
    • Sostituisci Your Font Name con ilnome del font.
    • Sostituisciyour_font_file.xxx?con l'URLdello strumento file. Ripeti per ogni formato di file.
  • Crea regole CSS con la proprietà font-family per applicare il font personalizzato.
  • In alto a destra, clicca su UpdateoPublish per rendere attive le tue modifiche.

sample-custom-font-in-stylesheet

Usare un font personalizzato in un modello di email codificato in modo personalizzato

I font personalizzati non sono supportati nella maggior parte dei client di posta elettronica. Per assicurare un'esperienza coerente per i tuoi lettori, utilizzare i font web predefiniti nelle email è raccomandato. Tuttavia, se vuoi aggiungere un font personalizzato a un modello di email codificato, puoi 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, apri il modello di email codificato personalizzato.
  • Per ogni stile di carattere:
    • Nella sezione <head> del template, incollate 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');}
    • Sostituisci Your Font Name con ilnome del font.
    • Sostituisciyour_font_file.xxx?con l'URLdello strumento file. Ripeti per ogni formato di file.
  • Nel codice del corpo dell'e-mail, aggiungi il font personalizzato nello stile inline.
  • In alto a destra, clicca su UpdateoPublish per rendere attive le tue modifiche.

Utilizzare un font personalizzato in un CTA

Una volta che hai aggiunto un font personalizzato allo strumento file, puoi usarlo nelle CTA:

  • Nel tuo account HubSpot, naviga su Marketing > Acquisizione lead > CTA.
  • Passa sopra un CTA, poi clicca sul menu a discesa Azioni e selezionaModifica.
  • Nel pannello di destra, clicca suOpzioni avanzate.
  • Nella casella di testo, incollate questo codice:

font-family: 'Your Font Name';

  • SostituisciYour Font Namecon ilnome del font.
  • In basso a destra, clicca suNext. Poi clicca su Salva.

set-custom-font-for-cta

Utilizzare un font personalizzato in un modulo personalizzato

Una volta che hai aggiunto un font personalizzato allo strumento file, puoi usarlo nei moduli personalizzati:

  • Nel tuo account HubSpot, naviga su Marketing > File e Modelli > Strumenti di progettazione.
  • Nel finder, aprite il modulo personalizzato.
  • Nella sezione module.css, 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');}
  • Sostituisci Your Font Name con ilnome del font.
  • Sostituisciyour_font_file.xxx?con l'URLdello strumento file. Ripeti per ogni formato di file.
  • Crea regole CSS con la proprietà font-family per applicare il font personalizzato.

custom-module-custom-font

  • In alto a destra, fai clic su Publish changes (Pubblica modifiche) per rendere attive le tue modifiche.