Usare font personalizzati sui post o sulle pagine del blog

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

L'aggiunta di un font personalizzato non

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

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.

• Nel tuo account HubSpot, naviga su Marketing > File e Modelli > Strumenti di progettazione.
• Apri ilfoglio di stile applicato al tuo blog o 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 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';
}