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 font predefiniti nei moduli di testo formattato

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. 

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.
   • E-mail: Nel tuo account HubSpot, vai a Marketing > E-mail.
2. Fai clic sul nome del tuo contenuto. 
3. Nell'editor di 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 Caratteree seleziona un carattere. Nei moduli di testo formattato sono disponibili i seguenti caratteri: 
   • Caratteri del marchio

   • Andale Mono*

   • Arial

   • Book Antiqua*

   • Courier New

   • Georgia

   • Helvetica

   • Impact*

   • Lato**
   • Merriweather**

• • Monaco*

• • Simbolo*

  • 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 di default 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. Clicca sul nome del font per visualizzare un elenco di stili disponibili per l'importazione.
4. Accanto a ciascuno stile che desideri importare, clicca 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 al tuo contenuto HubSpot: 

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

Utilizza 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, clicca suPubblica modifiche per rendere effettive le modifiche. 

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

1. Copia 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. 

Utilizzare 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, fai clic suAvanti. Quindi, fai clic su Salva.

Utilizzare 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 clicca su Azioni > Modifica modulo o Crea un nuovo modulo.
3. Nell'editor del modulo, clicca 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 uncarattere Google Font. 
6. In alto a destra, clicca suAggiorna oPubblica per rendere effettive le modifiche. 

Utilizzare un font Google in un modulo personalizzato

Nota: i Google Font 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 selezionaCarattere. Scopri di più sull'utilizzo dei campi carattere.
   
   
   
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 di contenuti, fai clic sulmodulo personalizzato. 
8. Nell'editor della barra laterale, clicca sul menua tendina Campo fonte seleziona unfont Google. 

Utilizza font personalizzati

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

Utilizzare font personalizzati nei temi

Nell'editor dei temi è 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 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 font e selezionaGestisci font 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 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, 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 suun menu 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 aggiuntivi o eliminare font. 

Utilizza i font personalizzati nei fogli di stile

In alternativa all'utilizzo di 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. Puoi 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. Fai clic suCarica file. 
3. Sul disco rigido del computer, seleziona ifile dei caratteri, quindi fai clic suApri. 
4. Fai clic sul nome di un file di font caricato. 
5. Nel pannello di destra, fai clic suCopia URL per copiare l'URL in cui è ospitato il file. Ti servirà l'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: '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. • • Sostituisci il nome del tuo font con ilnome del font.
     • Sostituisciil tuo_file_font.xxx? conl'URL dallo 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 e-mail. Tuttavia, se desideri aggiungere un font personalizzato a un modello di e-mail 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 font:
   • Nella sezione <head> del modello, incolla 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. • 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 carattere 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, fai clic 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. 

Utilizza un font personalizzato in un CTA (legacy)

Analogamente ai CTA, dopo aver caricato un file di modulo personalizzato, puoi 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, clicca suOpzioni avanzate. 
4. Nella casella di testo, incolla questo codice:
   
   font-family: 'Nome del tuo font';
5. Sostituisci il nome del 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: '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. 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, fai clic su Pubblica modificheper rendere effettive le modifiche.