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.
Design Manager

Usare font personalizzati sui post o sulle pagine del blog

Ultimo aggiornamento: agosto 4, 2021

Si applica a:

Marketing Hub Professional, Enterprisee
CMS Hub Starter, Professional, Enterprisee
Legacy Marketing Hub Basic

Come alternativa all'uso di font web standard o all'uso di una libreria di font come Google fonts

, puoi ospitare i file dei font nel tuo file manager e fare riferimento ad essi nel tuo foglio di stile.

L'aggiunta di un font personalizzato non

aggiungerà il font a nessuna opzione di stile dei font negli editor di HubSpot. Avrai invece bisogno di usare i CSS per dare stile agli elementi di testo sulle tue pagine.

Affinché i font vengano caricati su tutti i browser, avrai bisogno di più formati dello stesso font. Si raccomanda di includere un minimo di versioni .woff, .ttf e .eot del font. Se stai usando un font che può essere usato legalmente sul web, puoi usare lo strumento di conversione di Font Squirrel per generare i vari formati di file. Avrai anche bisogno di creare regole @font-face aggiuntive per diversi stili e pesi (ad esempio, obliquo, grassetto, leggero, ecc.).

Nota: i font personalizzati non possono essere utilizzati in:


Per aggiungere font personalizzati ai tuoi fogli di stile, carica i tuoi file di font nello strumento file:

  • Nel tuo account HubSpot, naviga su Marketing > File e Modelli > File.
  • Fai clic su Carica file e seleziona i file dei font da caricare.
  • Nella dashboard del file manager, fare clic sul nome del file di font.
  • Nel pannello di destra, fai clic su Copy URL per ottenere l'URL del font da aggiungere al tuo foglio di stile. Per ottenere i migliori risultati di rendering, fai clic sul menu a discesa File URL e seleziona il dominio su cuiè ospitato il tuosito.

file-manager-get-url

Poi, apri il tuo foglio di stile nel gestore del design:
  • Nel tuo account HubSpot, naviga su Marketing > File e Modelli > Strumenti di progettazione.
  • Apri il foglio distile applicato al tuo blog o al modello di pagina.
  • All'inizio del tuo foglio di stile, incolla il seguente codice@font-face . Includi più regole se stai importando file per più stili di famiglie di caratteri.
@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_file.xxx? con l'URL dello strumento file. Ripeti per ogni formato.
  • Sostituisci 'Your Font Name' conil nome del tuo font personalizzato.

Dopo aver sostituito il font-family e gli URL dei font nel tuo codice, puoi fare riferimento al font-family personalizzato nel tuo foglio di stile. Il seguente è un esempio di come potrebbe essere il codice finale, dove il font personalizzato viene applicato al corpo della pagina:

/* Jurassic Park Normal */
@font-face {
font-family: 'Jurassic Park';
src: url('http://designers.hubspot.com/hubfs/jurassic-park.eot?') format('eot'), url('http://designers.hubspot.com/hubfs/jurassic-park.woff') format('woff'), url('http://designers.hubspot.com/hubfs/jurassic-park.ttf') format('truetype');
}










/* Jurassic Park Bold */
@font-face {
font-family: 'Jurassic Park'; src: url('http://designers.hubspot.com/hubfs/jurassic-park-Bold.eot?') format('eot'), url('http://designers.hubspot.com/hubfs/jurassic-park-Bold.woff') format('woff'), url('http://designers.hubspot.com/hubfs/jurassic-park-Bold.ttf') format('truetype');
font-weight: 700;
}










body {
font-family: 'Jurassic Park';
}