(TUTORIAL) Utilizzo di un font non di sistema in un sito creato con WebSiteX5EVO8

Fonte dalla quale è stata presa l'ispirazione: yourinspirationweb.com


Scaricare dal sito indicato, o da un qualsiasi altro sito che si trova in rete, il font .eot ed il relativo font .ttf che si vuole utilizzare

 

Inserire, con ftp esterno a WS, in una cartella appositamente creata nella root del nostro sito i due font (per esempio creiamo la cartella font il cui percorso sarà http://miosito.com/font )

 

Creiamo il nostro sito con WebSiteX5EVO8 con le consuete modalità ed esportiamo sul disco.

 

Apriamo il blocco note e scriviamo il css @ font-face indicato dal sito che sarà:

 

@font-face

{

font-family: 'Ubuntu-TitleTitle';

src: url('http://miosito.com/font/Ubuntu-Title.eot');

src: local('Ubuntu-Title Title'), local('Ubuntu-Title'), url('http://miosito.com/font/Ubuntu-Title.ttf') format('truetype');

}

 

dove:

  • Ubuntu-Title title è il nome del font che vogliamo utilizzare (quindi cambiarlo con il nome del font scaricato)
  • http://miosito.com/font/ è il percorso assoluto del font (quindi cambiare miosito.com/font con il nome del nostro sito e con il nome della cartella nella quale abbiamo inserito i font)

 

Salviamo questo file come custom.css nella cartella files creata da WS.

 

Ora dobbiamo decidere dove vogliamo che appaia il font "diverso" (sconsiglio il font .eot per tutto il sito, un elemento è più che sufficiente).
Per esempio decidiamo che il font ubuntu.eot sia utilizzato per il menu.

 

Apriamo il file styles.css creato da WSEVO che si trova nella cartella res creata dal programma, copiamo il css relativo al menu e cioè

 

/* -- Menu Main Settings -- */
#imMnMn {padding-top: -9px; }
#imMnMn ul, #imMnMn ul li {margin: 0; padding: 0; list-style: none; z-index: 1000; cursor: pointer; text-align: left; }
#imMnMn ul li {position: relative; float: left; margin-right: -0px; padding-right: 0px; }
#imMnMn ul a {display: block; text-decoration: none; padding: 3px 3px 3px 3px; height: auto !important; height: 1%; width: 114px; font: 11px Tahoma; color: #000000; float: none !important; float: left; }

 

incolliamola sul file custom.css che abbiamo appena creato, variando il font di default utilizzato (tahoma) con il font .eot che invece vogliamo che appaia, nel nostro caso Ubuntu-TitleTitle per cui diventerà:

 

/* -- Menu Main Settings -- */
#imMnMn {padding-top: -9px; }
#imMnMn ul, #imMnMn ul li {margin: 0; padding: 0; list-style: none; z-index: 1000; cursor: pointer; text-align: left; }
#imMnMn ul li {position: relative; float: left; margin-right: -0px; padding-right: 0px; }
#imMnMn ul a {display: block; text-decoration: none; padding: 3px 3px 3px 3px; height: auto !important; height: 1%; width: 114px; font: 11px Ubuntu-TitleTitle; color: #000000; float: none !important; float: left; }

 

Chiudiamo, salvandolo nella cartella files, questo file custom.css

 

Apriamo il nostro progetto creato con WSEVO, se non abbiamo nessun oggetto HTML nel nostro lavoro, creiamone uno in una parte qualsiasi, con dimensioni ridotte e alleghiamo a questo oggetto con l'apposita graffetta il file custom.css.

 

Nello Stadio_1 di WS > Impostazioni Generali > pannello Esperto > sezione Attivazione Statistiche scriviamo la seguente stringa:
<link rel="stylesheet" type="text/css" href="files/custom.css" media="screen, print" />

 

A questo punto non ci resta che esportare nel web il lavoro fatto con WS e, solo online, si dovrebbe vedere il font diverso utilizzato per il menu.

 

Ovviamente il font diverso si può utilizzare per qualsiasi cosa, per esempio soltanto per un oggetto inserito in una sola pagina... insomma si possono fare diverse cose.