Utilizzare font personali con i CSS3
4 Commenti - Categoria: CSS
Con l’avvento dei CSS3, anche se non sempre supportati bene da tutti i browser, uno fra tutti Internet Explorer, le possibilità di personalizzazione dei siti web a dispodizione dei webdesigner è aumentata notevolmente. Spesso scrivere una determinata frase o headline con quel font che ci piace tanto ci ha portati ad utilizzare una immagine.
Grazie alle specifiche CSS3 oggi è possibile utilizzare anche un font diverso da i classici utilizzati per i siti web come Arial, Verdana ecc. ecc.
Requisiti di utilizzo
Per utilizzare il nuovo font all’interno delle nostre pagine è obbligatorio copiare il file del font e posizionarlo in una cartella o nella stessa root del sito web caricandolo via FTP.
Una votla caricato il font nel dominio andiamo ad utilizzare @font-face in cima al nostro foglio di stile.
Esempio di utilizzo
Supponendo di voler utilizzare il font Adventure vediamo il codice da scrivere in cima al nostro foglio di style:
@font-face {
font-family: 'Adventure'; /* dichiarazione */
src: url('Adventure.ttf'); /* indirizzo del font */
}
Per utilizzare il font dichiarato ci basterà menzionarlo nel foglio di style utilizzando font-family nella dichiarazione all’intenro di un selettore oppure creiamo una classe e definiamo tutti al suo interno.
.fontadventure {
font-family: Adventure;
font-size: 20px;
}
Per visualizare il testo con questo font ci basterà assegnare la classe al selettore.
Pro e Contro
Pro: Aumento della personalizzazione delle pagine
Contro: Se troppo utilizzato può appensantire anche di molto la pagina web. Per ora è meglio non esagerare nel caricare font. Cerchiamo di utilizzare comunque i font standard.
E tu hai mai utilizzato questa tecnica?
alessandro
mai utilizzato questa tecnica, sempre o meglio da quando possibile: cufon
, mi piace sta tecnica la provo domani grazie
Andrea Leti
Ciao Alex! Conosco cufon però l’articolo in questione è tutto css!
Daniele
Ciao Andrea. Volevo sperimentare questa tecnica sul mio portfolio http://portfolio.danielevotta.it come vedi le scritte che ci sono ora sono immagini. Le ho create con Photoshop e il font English. Ho provato a fare quello che dici nell’articolo, sembrerebbe funzionare ma il font non lo visualizzo come è ora nell’immagine (Ad esempio con quelle decorazioni sulle maiuscole). Ma lo visualizzo normale… E’ un problema del font o sbaglio io qualcosa?
Grazie ciao!
Andrea Leti
Si probabilmente è un problema del font.