dic122009

Fonts personalizzati

Wordpress, Wordpress mu • Visitato 919 volte, 4 per oggi

Giuda cambiare i fonts in wordpress, per chi non si accontenta del solito tema, scaricato e lasciato come è !!

Uno standard di wordpress è avere tutte le impostazioni di visualizzazione nel file style.css, in esso oltre il layout ci sono le dimensioni , colori, eccetera, naturalmente il fonts di come deve apparire.

La fonte di questa guida si trova su questo sito >>> spyrestudios.com

fonts

Nella stessa guida vengono usati i fonts con estenzione ” otf

OpenType ® è l’unificazione dei due più potenti e ampiamente utilizzati formati di font di oggi, PostScript ® e TrueType ®, in un unico formato di font.

Ma si possono usare tutti gli altri fonts in circolazione con estensione “ ttf “.

Quindi se abbiamo dimestichezza con wordpress, html, ftp e tutte le altre configurazioni e nozioni che andiamo a cambiare , mettiamoci all’opera.

wonder risultato finale.

Il questo esempio apporterò modifiche sul titolo dei post sia nell’home page che nei post in se. I file in questione sono index.php e single.php.

Aprendo questi file bisogna capire quale “id” oppure “class” che determina la visualizzazione del nostro titolo.

In particolare la “class” prima del codice <?php the_title(); ?>

Determinata la “class” verificare le dimensione del titolo utilizzato di solito “H2″

title

Nel file style.css di questo esempio la class è stata chiamata in modo idonea ed opportuna, cioè class="post-title" ma non è sempre cosi, consultate il vostro style.css.

Quindi troviamo “class=post-title”, se non c’è in concomitanza di “H2″ allora dobbiamo modificare sono il codice di quest’ultimo.

Quindi troviamo il punto dove si trova “H2″

Terminata la ricerca, osserviamo cosa c’è scritto nel campo sotto “H2″ sarà tipo

h2 {
text-shadow: 2px 2px 3px #fff;
color: #3248cb;
margin: 0px 0px 2px;
border-bottom: 1px dashed #CCCCCC;
letter-spacing: -1px;
font: normal 180%/100% "Trebuchet MS", Tahoma, Arial;
padding-bottom: 3px;
font-style:italic;
}

Il font impostato sono di solito quelli presenti nei sistemi operativi di defaut , per avere la certezza della stessa visualizzazione nei vari browser e OS utilizzati per accedere al sito.

Introduzione codice e fonts personalizzato.

Stabilito il nostro fonts , bisogna collocarlo dentro directory del nostro tema nella root di wordpress.

Quindi dentro directory del tema creiamo la cartella “fonts” e scarichiamoci in nostro file del fonts.

Il codice per attribuire il fonts è questo, il nome del fonts utilizzato è MICHAEL :

@font-face {
font-family: MICHAEL;
src: url("fonts/MICHAEL.TTF") format("opentype");
}
@font-face {
font-family: MICHAEL;
font-weight: bold;
src: url("fonts/MICHAEL.TTF") format("opentype");
}

da notare dove punta la richiesta del file da utilizzare, è quella creata in precedenza.

Aggiunto questo codice al file style.css, dobbiamo indicare a “H2″ di utilizzare questo nuovo fonts.

Il risultato finale sarà :

h2{
font-family: MICHAEL, Helvetica, Verdana, Sans-Serif;
text-shadow: 2px 2px 3px #fff;
color: #3248cb;
margin: 0px 0px 2px;
border-bottom: 1px dashed #CCCCCC;
letter-spacing: -1px;
}

da notare che ho conservato le altre impostazioni cambiando solo il tipo di fonts da utilizzare.

Aggiornando il file style.css sul server dovremmo notare le differenze .

Grazie di aver letto questa giuda un po spartana , di seguito c’è uno dei tanti siti dove si possono scaricare fonts.

http://www.fonts500.com/

Articoli con qualche attinenza.

  • Una esigenza sentita quando si usano programmi di office in linux, usare e visualizzare i docume ...

  • Terminata installazione Lenny e aprendo il browser, balza subito in evidenza la visualizzazione ...

  • Fonte dei fonts scusate il gioco di parole. Click su questo link --> aenigma Dal sito si p ...

  • Sono un Blogger un Webmaster che dir si voglia . . . !!!! Come tale almeno per quanto mi riguar ...

  • Il Meteo.it mette a disposizione dei script da inserire nelle pagine web. Lo script è persona ...

Pubblicato 230 giorni fa.

No Responses

Comment RSS Trackback URL

Leave a Reply

73 queries. 1,651