E’ risaputo da tutti, programmatori esperti e meno, e da tutti i webdesigners, che in una pagina html era possibile specificare solo una famiglia o un tipo di fonst, tra quelli pre-installati (Arial, Geneva, Courier, Serif ecc…).
Oggi, con il modulo CSS3 per i web fonts e la proprietà @fontface, è possibile uscire da questo schema ristretto e liberarsi dai soliti fonts per usarne tantissimi altri. Le possibiità diventano infinite perchè la proprietà @font-tace è in grado di far visualizzare fonts che non fanno parte della comune libreria pre-installata, specificando un URL legato ad un font, che potrà così essere scaricato e installato, al fine di renderlo disponibile nella pagina html (e quindi visualizzato).
Quello su cui però bisogna fare attenzione è il copyright. Meglio usare fonts free che non siano tutelati dalla norma sui diritti d’autore, per non incappare in problemi piuttosto spinosi.
Qui su questo blog, per i titoli, abbiamo usato la proprietà @fontface scegliendo un font free per dare un tocco un po’ “diverso” e caratteristico.
Potete trovare idee e soluzioni, per i vostri webfonts anche qui: http://www.fontsquirrel.com/
Qui invece il codice che abbiamo utilizzato:
@font-face {
font-family: 'Luxi Mono';
src: url(fonts/luximr.eot);
src: local('Luxi Mono'), url(fonts/luximr.ttf) format("truetype");
}
grande lesson! Conosco il sito che citi, ma il codice dove lo posiziono? Scusa la domanda ovvia, ma sai la mia ignoranza…
Oddio, dovunque tu gestisca il tuo css.
Ma sconsiglio a chiunque non capisca il css di metterci mano.
O meglio, mi correggo, consiglio a chiunque non conosca il css di studiarselo, che è meglio.
Chiaro il messaggio Daniele….ne starò lontano il più possibile…
Al contrario, dovrebbe istigarti allo studio.
in realtà inserirli nel proprio sito è semplice, si tratta di dichiarare il nuovo font (io lo faccio all’inizio del css):
@font-face {
font-family: ‘MioFont’;
src: url(fonts/miofont.ttf);
}
e poi si può usare come se fosse un carattere normale…
body {
font-family:MioFont,Arial,Helvetica,sans-serif;
}
è importante mettere dei font di fallback per diversi motivi, fra cui il fatto che i browser meno recenti non supportano ancora questa nuova tecnologia
Grazie per il commento. Continua a seguirci!
ToX, non è propriamente così semplice, ci sono meccanismi per cui si rischia che IE cerchi di usare la versione ttf, il fatto che IE vada a scaricare il ttf per poi non usarlo (IE usa l’eot).
Lo snippet che ha postato Andreas è frutto di svariati test, soprattutto da parte di Paul Irish, e va usato alla lettera.
Per questo dico ai neofiti “imparate l’abc prima di addentrarvi nelle cose complesse”, Franz ha posto una domanda che tradisce una scarsa esperienza, e ritengo che prima di tuffarsi nelle @rules sia il caso di prendere dimestichezza con il css ed i suoi problemi.
Se il css fosse semplice come sembra non ci sarebbero così tanti post sulla css-d (mailing list dedicata).