Usare font personalizzati sui post o sulle pagine del blog
Ultimo aggiornamento: febbraio 25, 2021
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:
- Modelli di e-mail, poiché la maggior parte dei client di posta elettronica non supporta i font personalizzati.
- Pagine costruite con modelli di partenza.
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 *//* Jurassic Park Bold */
@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');
}
@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';
}
Contenuti correlati
-
Costruire un modello codificato personalizzato
Nel tuo strumento di gestione del design, i designer possono costruire modelli con HTML da zero. Per ...
Knowledge base -
Modificare un semplice modulo di menu
I menu semplici sono ideali per i casi in cui vorresti aggiungere la navigazione su poche pagine del tuo sito.
Knowledge base -
Gestire contenuti multilingue
Puoi gestire i contenuti per il tuo pubblico globale in più lingue sulle tue landing page e pagine del sito...
Knowledge base