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 @font-face aggiuntive per diversi stili e pesi (ad esempio, obliquo, grassetto, leggero, ecc.).

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.

• 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';
}