Una collezione di font gratuiti per usare @font-face nei CSS
Mercoledì 2 Settembre 2009 - 08:32
di Cesare Lamanna
Parlando di Dive into HTML 5, abbiamo anche tessuto le lodi delle scelte tipografiche adottate sul sito grazie all’uso nei CSS di font particolari e incorporati nella pagina tramite @font-face.
In effetti, la possibilità di far scaricare un font specifico, senza quindi doversi preoccupare che esso sia presente sul PC dell’utente, apre vie straordinariamente interessanti, soprattutto ora che tale funzionalità è supportata da tutti i principali browser.
Come molti sanno, uno dei problemi nell’adottare questa soluzione deriva dal fatto che Internet Explorer supporta come formato il solo EOT. Ciò rende necessario, ogni volta, avere a disposizione o creare la versione EOT di un font TrueType. Il tutto deve poi avere corrispondenza nelle regole CSS:
/* IE6/7/8 - Questa dichiarazione deve essere all'inizio */
@font-face {
font-family: nomeDelFont;
src: url( /nomeDelFont.eot );
}
/* Firefox 3.5/Safari/Opera 10 */
@font-face {
font-family: nomeDelFont ;
src: url( nomeDelFont.ttf );
}
Sul sito Font Squirrel è possibile scaricare dei veri e propri kit per l’uso di @font-face. In un singolo pacchetto si trovano le versioni EOT e TTF del font prescelto e un CSS di esempio. Comodo. Ampia la scelta dei font gratuiti messi a disposizione.
Commenti
1
molto comodi i kit scaricabili.
ho notato 2 cose che non mi entusiasmano pero’ finora:
- su chrome non funziona
- safari chiede conferma per utilizzare le font (penso all’utonto)
2
Troglos, per quanto ne so (link), i web fonts sono supportati da Chrome in quanto basato su webkit, ma la funzionalità è stata disabilitata per motivi di sicurezza.
Curiosità: che versione di Safari usi e su quale sistema operativo? Suppongo Windows, perché su Mac non mi è mai capitata una situazione del genere…
# - postato da Cesare Lamanna - 02 Settembre 2009 - 11:39
3
@Cesare: Safari 4.0.2 su Mac
Quando ho accettato ho cliccato sul flag “non chiedermelo in futuro”, quindi magari l’hai fatto in passato…? bohcomunque ora che ricordo mi è gia capitata sta cosa parecchio tempo fa
4
Cesare grazie per il link, molto utile. Unico appunto, il tuo esempio non e’ dei piu’ corretti (anche se dei piu’ usati online) perche’ in quel modo IE fara’ 2 richieste invece che una, ergo pagine lente a caricare se si usano piu’ fonts o se ne usano di pesanti poiche’ IE scarica prima l’eot, poi l’altro anche se non lo utilizza (FF e gli altri invece ignorano la prima e la sovrascrivono, troppo difficile da fare per IE … eh?)
Ci sono controversie sulla tecnica migliore per evitare doppia richiesta al server, per ora posso dirti che commenti condizionali per i CSS sul layout (classico .. ) per la sola definizione o inclusione dei fonts sono i piu’ “sicuri”.
5
Grazie ad Andr3a per l’appunto e a Troglos per la precisazione :) Sono un po’ pigro ultimamente e ho ancora la beta di Safari 4, non ricordo di aver mai visto quel messaggio a dire il vero, forse lo hanno aggiunto per motivi di sicurezza nella release finale… approfondirò ;)
# - postato da Cesare Lamanna - 02 Settembre 2009 - 14:50
6
Tutto ciò quando in rete impazza la polemica per l’IKEA che è passata al Verdana persino per il catalogo cartaceo :)
# - postato da Gennaro - 03 Settembre 2009 - 02:13
7
Un altra modifica dell’esempio, in termini di performance, potrebbe essere questa: se il font è particolarmente completo di caratteri e simboli ma a noi serve ad esempio il solo set di caratteri Latin-A è possibile definire la proprietà unicode-range : U+00??, U+01??;
Questa regola permetterà di scaricare i soli caratteri che fanno match con il set richiesto, diminuendo pertanto i tempi di caricamento e di rendering (di default il valore di questa proprietà dovrebbe essere U+07FF).
E’ possibile definire valori singoli o intervalli di valori ed è consentito l’uso di wildcards (* e ?)
# - postato da Fabrizio Calderan - 04 Settembre 2009 - 10:55
8
Volevo utilizzare font-face e il post di Cesare mi ha dato lo spunto con l’ottimo kit di squirrel. Orrore! Contrariamente alle mie aspettative con IE si visualizza correttamente e con Firefox NO! Firefox non supporta la funzionalità font-face se il font non è presente nello stesso dominio. Su Blogger non è possibile farlo. Quindi? Qualcuno ha una soluzione “pulita”?
9
Per chi volesse evitare di sprecare banda, ogni font pesa fino a 100Kb o più, o poplare il server di errori, IE non capisce un accidente di niente, questo è il risultato di almeno 4 persone, me compreso, che si sonmessi giù a capire cosa c’era che non andava, e cosa si poteva fare per risolvere.
L’update per la soluzione, post più commenti per approfondire:
http://webreflection.blogspot......wrong.html
10
[…] Sull’ennesima morte di RSS… (23)Tutto ha un prezzo (19)Uso quel linguaggio… e sono felice (17)Storie di interfacce (12)Voi vi sentite “adatti ad ogni esigenza”? (10)Una collezione di font gratuiti per usare @font-face nei CSS (9)Un tuffo in HTML 5 (7)Effetto Polaroid con i CSS (7)Immagini ‘fluide’ con jQuery (6)Ispezionare i colori con CSS Prism (4) […]
# - postato da Il modo migliore per usare @font-face | Edit - Il blog di HTML.it - 07 Settembre 2009 - 12:42
11
… in effetti questa notizia apre molti orizzonti!!!
ma siamo sicuri che funziona con tutti i browser??# - postato da Gianluca - 09 Settembre 2009 - 08:05