Gabriele Morero - Grafico Webdesigner SEO

Sostituire il font al proprio sito web

Oggi scoprirete come sostituire un qualunque font sul vostro sito web utilizzando il font replacement in modo da poter poterlo personalizzare e rendere l’aspetto grafico ancora più gradevole.

Una delle tecniche più recenti e funzionali è il Cufon, che permette appunto la sostituzione del normale web font con un altro tramite del codice Javascript; in questa maniera il nostro testo in html sarà riscritto a video con il nostro font personalizzato.

Per tanto, una volta creata la nostra pagina web con testi e quant’altro procediamo in tal senso:

Step1

Scarichiamo il Cufon,  e lo salviamo in un file javascript (.js) collegandolo ovviamente alla nostra pagina web.

<script type="text/javascript" src="javascript/cufon.js"></script>

Step2

A questo punto dobbiamo scegliere il font da utilizzare, ricordandoci di avere a portata di mano i file relativi al carattere, procediamo quindi a caricare tali file nel generatore di codicei Cufon .

Otterremo quindi un file .js con le istruzioni di codice per effettuare la sostituzione del nostro testo html.

Step3

Ci verrà chiesto di caricare i vari file del font in modo da avere più caratteri possibili da sostituire, ovvero: sarà richiesto il font regular, il bold, ecc..e poi ancora la punteggiatura, i simboli e sopratutto i diritti alla pubblicazione. In ogni caso una volta completato verrà generato uno o più files javascript con il nome del vostro font e il corpo che andranno scaricati e linkati alla vostra pagina html.

<script type="text/javascript" src="nomefile.js"></script>

Step4

Per perfezionare ancora di più il nostro lavoro basterà  dare allo script javascript  alcune istruzioni per una miglior sostituzione del carattere. Si ordinerà quindi di sostituire, ad esempio solo i tag h1 e il testo dei paragrafi:

<script type="text/javascript">
  Cufon.replace(['h1','p']);
</script>

Troverete comunque molte altre opzioni aggiuntive nella sezione dedicata del sito Cufon.

Nota Importante:

Possono capitare problemi di incompatibilità con Internet Explorer 9, per risolverli seguite la Soluzione ai problemi di visualizzazione di IE9

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Tweets

Scroll to top