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: febbraio 25, 2021

Si applica a:

Marketing Hub  Professional, Enterprisee
CMS Hub  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 nelle 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 di font da caricare. Per ottenere i migliori risultati di rendering, fai clic sul menu a discesa URL del file e seleziona il dominio su cuiè ospitatoil tuo sito.
  • Nella dashboard del file manager, fai 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.

file-manager-change-domain

Poi, apri il tuo foglio di stile nel gestore del design:
@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 Normale */
@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';
}