Utilizzare i font in HubSpot

I caratteri in HubSpot sono disponibili in modi diversi a seconda del tipo di contenuto e del tipo di carattere. Alcuni caratteri predefiniti sono disponibili in tutti gli editor di contenuti. I caratteri web e quelli personalizzati potrebbero dover essere aggiunti alle impostazioni del tema, ai fogli di stile, ai moduli personalizzati o ai modelli codificati.

Prima di iniziare

Prima di iniziare a utilizzare i caratteri in HubSpot, esamina i requisiti e le considerazioni.

Comprendere le limitazioni e le considerazioni

• Non tutti i tipi di contenuto sono disponibili in tutti gli account. Per verificare quali tipi di contenuto sono disponibili per il proprio abbonamento, consultare il Catalogo prodotti e servizi.
• Consulta la tabella sottostante per capire quali opzioni di font sono disponibili per ciascun tipo di contenuto:

Utilizza i caratteri predefiniti nei moduli di testo formattato

I caratteri predefiniti sono supportati in tutti i contenuti HubSpot, anche se le opzioni disponibili e dove è possibile applicarle dipendono dal tipo di contenuto.

1. Accedi ai tuoi contenuti:

   • 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.
   • Email: Nel tuo account HubSpot, vai a Marketing > E-mail.
2. Fai clic sul nome del contenuto.
3. Nell'editor dei 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. I seguenti caratteri sono disponibili nei moduli di testo formattato:

Utilizza

i font web I font web sono supportati in alcuni contenuti HubSpot, ma non sono disponibili nel menu a tendina "Font" nell'editor di testo avanzato. A seconda del tipo di contenuto, i font web possono essere applicati nelle impostazioni del tema, nei fogli di stile, nei moduli personalizzati o nei modelli codificati. 

Gli sviluppatori possono utilizzare il campo font per aggiungere font web ai temi e ai moduli personalizzati. Quando i font web vengono aggiunti in questo modo, HubSpot li carica direttamente sul dominio

del

contenuto invece di caricarli da un servizio

di terze parti

.

Utilizza 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 unfont. 
3. Fai clic sul nome del font per visualizzare un elenco di stili disponibili per l'importazione.
4. Fai clic su Ottieni font in alto a destra.
5. Fai clic su "Ottieni codice di incorporamento" in alto a destra.
6. Nella colonna di destra, seleziona @import nella scheda Web.
7. Copia il codice @import senza il tag <style>.
8. Copia ilcodice della classe CSS per impostare le regole CSS. 

9. Dopo aver copiato il codice da Google Fonts, puoi aggiungere il font ai tuoi contenuti HubSpot: 

• • Utilizza un font di Google in un foglio di stile
  • Utilizza un font di Google in un modello di email personalizzato
  • Utilizza un font di Google in un CTA (versione precedente)
  • Utilizza un font di Google in un modulo
  • Utilizzare un font Google in un modulo personalizzato

Utilizzare un font Google in un foglio di stile

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

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

I font Google sono supportati in Apple Mail e in alcuni altri client di posta elettronica, ma il supporto è limitato. I client di posta elettronica più diffusi supportano solo i font web predefiniti. Scopri di più sulla selezione dei font predefiniti utilizzati nell'editor di email classico. 

Per aggiungere un font Google a 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. Nella sezione <body> del modello, aggiungi il font personalizzato nello stile inline. 
6. In alto a destra, clicca su Pubblica modificheper rendere effettive le tue modifiche. 

Utilizza un font Google in un CTA (versione precedente)

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, clicca suAvanti. Quindi, clicca su Salva.

Utilizza un font di 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 unGoogle Font. 
6. In alto a destra, clicca suAggiorna oPubblica per rendere effettive le modifiche. 

Utilizza un font Google in un modulo personalizzato

Nota: i font Google 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, clicca sul nome di un modulo personalizzato. Scopri di più sulla creazione di un modulo personalizzato.
3. Nell'inspector, clicca sul menu a tendina Aggiungi camponellasezione Campie seleziona Carattere. Scopri di più su come lavorare con i campi carattere.

4. In alto a destra, clicca su Pubblica modifiche perrendere effettive le modifiche. 
5. Accedi ai tuoi contenuti:
   • 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 dei contenuti, clicca sulmodulo personalizzato. 
8. Nell'editor della barra laterale, clicca sul menua tendina del campo Fonte seleziona unGoogle Font. 

Utilizza font personalizzati

In alternativa all'uso di font web standard o di una libreria di font comeGoogle Fonts, carica i file dei font, quindi

utilizzali

nei temi o fai riferimento ad essi nei fogli di stile.

Utilizza font personalizzati nei temi

Nell'editor dei temi, carica un font personalizzato, quindi utilizzalo nelle pagine e nei post. I file dei font sono supportati nei seguenti formati: TTF, OTF, WOFF.

Caricare font personalizzati per pagine o post

Dopo aver caricato i font personalizzati, questi saranno disponibili per pagine, post o articoli della knowledge base.

1. Accedi ai tuoi contenuti:

   • 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 suun 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 i font personalizzati per gli articoli della Knowledge Base

Dopo aver caricato i font personalizzati, questi saranno disponibili per pagine, post o 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 caratteri qualsiasi e selezionaGestisci caratteri 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 del tema, puoi caricare font aggiuntivi, personalizzare i font esistenti con stili di font aggiuntivi o eliminare i font.

Utilizzare font personalizzati nei fogli di stile

In alternativa all'uso di font web standard o di una libreria di font comeGoogle Fonts, è possibile ospitare i file dei font nello strumento file, quindi farvi riferimento nel proprio foglio di stile.

Nota:i fontpersonalizzatisono disponibili solo negli account con accesso al gestore del design e devono essere applicati tramite CSS. L'aggiunta di un font personalizzatonon lo aggiungerà ai menu a tendina di stile nell'editor dei contenuti.

Per utilizzare un font nei contenuti, 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 nellostrumento 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. Fare clic suCarica file.
3. Sul disco rigido del computer, seleziona ifile del font, quindi cliccasu Apri.
4. Fai clic sul nome di un file di font caricato.
5. Nel pannello di destra, clicca suCopia URL per copiare l'URL dove è ospitato il file. Avrai bisogno dell'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');}


• • Sostituisci " Nome del tuo font" con ilnome del font.
  • Sostituisciyour_font_file.xxx? conl'URL dello 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, si consiglia di utilizzare i font web predefiniti nelle email. Tuttavia, se desideri aggiungere un font personalizzato a un modello di email 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, clicca sul nome del tuo modello di email con codice personalizzato.
3. Per ogni stile di carattere:
   • 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 " Nome del tuo font" con ilnome del font.
   • Sostituisciyour_font_file.xxx? conl'URLdello strumento file. Ripeti l'operazione per ogni formato di file. 

4. Nel codice del corpo dell'e-mail, aggiungi il font personalizzato nello stile inline. 
5. In alto a destra, clicca su Aggiorna oPubblica per rendere visibili 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 di sinistra dell'editor dei CTA, clicca sulla scheda Design. 
5. Fai clic sulla sezione Stili per espanderla.
6. Fai clic sul menu a tendina Carattere principale e seleziona il tuo carattere personalizzato. 
7. Continua a creare il tuo CTA. 

Utilizza un font personalizzato in un CTA (

versione precedente

)

Come per i CTA, dopo aver caricato un file di font personalizzato, utilizzalo con i CTA della versione precedente.

1. Nel tuo account HubSpot, passa a Marketing > CTA.
2. Passa il mouse su un CTA, quindi clicca su Azioni > Modifica. 
3. Nel pannello di destra, clicca suOpzioni avanzate. 
4. Nella casella di testo, incolla questo codice:
   
   font-family: 'Your Font Name';
5. Sostituisci Nome del tuo font conilnome 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, utilizzalo 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. Nel Finder, clicca sul nome del modulo personalizzato.
3. Nell'editor del modulo, nella sezionemodule.css, incolla il codice seguente:

@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 " Nome del tuo font" con ilnome del font.
   • Sostituisciyour_font_file.xxx? conl'URLdello strumento file. Ripeti l'operazione per ogni formato di file.
6. Crea regole CSS con la proprietà font-family per applicare il font personalizzato. 
7. In alto a destra, clicca su Pubblica modificheper rendere effettive le tue modifiche.